0
点赞
收藏
分享

微信扫一扫

Vue路由-Vue Router

E_topia 2021-09-24 阅读 54
一、概念

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。
功能

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式,在 IE9 中自动降级
  • 自定义的滚动条行为
二、安装
  • NPM
npm install vue-router
  • 创建单文件系统时通过命令行或者Vue ui来安装

三、Vue Router的使用
  • 导入路由插件
import Vuerouter from "vue-router"
  • 安装路由
Vue.use(Vuerouter);
  • 创建路由对象,配置路由规则
const router = new Vuerouter({
  routes: [
    {
      path: "/hellojava",      //路径路由
      name:"hellojava"      //命名路由
      component: HelloJava   //组件
    },
    {
      path: "/helloworld",   //路径路由
      name:"helloworld"      //命名路由
      component: HelloWorld//组件
    }]
})
  • 申明式导航
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/helloworld">Go to Foo</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
  • 编程式导航
// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意:如果要使用params就不能使用路径路由

  • 动态路由匹配
const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

//接收数据
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
  • 嵌套路由
const routes = [
  {
    path: '/main',
    name: 'main',
    component: () => import('@/views/main.vue'),
    //要在嵌套的出口中渲染组件,需要在 VueRouter 的参数中使用 children 配置
    children: [
      {
        path: '/product',
        name: 'product',
        component: () => import('../views/product.vue')  //懒加载
      },
      {
        path: '/userlist',
        name: 'userlist',
        component: () => import('../views/userlist.vue') //懒加载
      },
    ]
  }
]
  • 重定向
//重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b:
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})
重定向的目标也可以是一个命名的路由:
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})
  • 全局导航守卫和路由元信息
const router = new Vuerouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: 'login'  //重定向
    },
    {
      name: "login",
      path: "/login",
      component: login

    },
    {
      name: "mains",
      path: "/mains",
      component: mains,
      meta: { isok: true }, 
      
    },
    {
      path: "*",
      component: login
    }
  ]
})

  router.beforeEach((to, from, next) => {
  const isok = to.matched.some(record => record.meta.isok) //路由元信息
  const userinfo = localStorage.getItem("isok");
  console.log(`userinfo:${userinfo}`)
  if (isok) {
    if (userinfo) {
      next();
    } else {
      next("/login");
    }
  } else {
    next()
  }
})
举报

相关推荐

0 条评论