Vue路由-Vue Router

一、概念

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

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

二、安装

• NPM

npm install vue-router

• 创建单文件系统时通过命令行或者Vue ui来安装
  image.png

三、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>'
}

• 嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件

嵌套路由

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') //懒加载
      },
    ]
  }
]

• 重定向

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b

//重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

重定向的目标也可以是一个命名的路由：
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

• 全局导航守卫和路由元信息

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

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()
  }
})