Vue-router 路由

安装

npm install vue-router

在模块化开发中必须要通过 Vue.use() 明确地安装路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

如果使用全局script则不需要

使用

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航，通过传入 `to` 属性指定链接，<router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口，路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件，可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置，当然还可以传别的配置参数
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 通过 router 配置参数注入路由，从而让整个应用都有路由功能
const app = new Vue({　　el:'#app',　　router})</script>

路由的模式

vue-router默认是hash模式，当url发生改变时，页面不会重新加载

history模式利用 history.pushState API 来完成 URL 跳转而无须重新加载页面，可以消除hash模式的“#”

只需在路由实例中加入mode:“history”就可以变成history模式

const router = new VueRouter({
  mode: 'history',
  routes
})

重定向

当页面的url跳转到某个地址时，可以通过设置redirect重新指定url

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }   //当url为 .../a 时，url被重新指定路径为 .../b 并映射 .../b对应的组件
  ]
})

 重定向的目标也可以是一个命名的路由：

const routes = [
    {
        path: '',
        redirect: {name : 'About'}
    },
        {
        path: '/about',
        name: 'About',
        component: () => import('../components/About.vue')
  }
]

也可以时函数

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象      
        return '/home'
    }}
  ]
})        

嵌套路由

可以在某个路由下设置children属性(数组)创建嵌套路由

const routes = [
  { path: '/', component: Home },
  { path: '/foo', component: Foo ,children:[
    {path:'foo1',component:Foo1},　　　　//这个路径不需要加 / 
    {path:'foo2',component:Foo2},
    {path:'foo3',component:Foo3},
  ]},
  { path: '/bar', component: Bar },
]

app页面

<div id="app">
  <p>
    <router-link to="/">index</router-link>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

在父路由foo中使用通过router-link使用子路由

const Home = { template: '<div>home</div>' }
const Foo = { template: `
  <div>
    <p>
      <router-link to="/foo/foo1">to Foo1</router-link>
 6       <router-link to="/foo/foo2">to Foo2</router-link>
 7       <router-link to="/foo/foo3">to Foo3</router-link>  
    </p>
    <router-view></router-view>
  </div>
  ` }
const Bar = { template: '<div>bar</div>' }
const Foo1 = { template: '<div>Foo1</div>' }
const Foo2 = { template: '<div>Foo2</div>' }
const Foo3 = { template: '<div>Foo3</div>' }

children属性里的path属性只设置为当前路径，因为其会依据层级关系；而在router-link的to属性则需要设置为完全路径

 

路由懒加载

当用户向服务器发送请求时，如果JavaScript包非常大，会造成用户界面空白的情况

懒加载可以在组件使用时再加载，从而解决用户界面空白的情况

component:() =>import (组件的路径)

const router = createRouter({
  routes:[
    {
        path:'/home',
        name:'Home',
        component: () => import ('../components/Home') 
    }
    ]
})

 懒加载导入组件

const Home = () => import ('../components/Home')

 

参数传递

$route相当于当前正在跳转的路由对象。可以从里面获取name,path,params,query等。

$router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样

第一种方法：

methods:{
    getDescribe(id) {
        // 直接调用$router.push 实现携带参数的跳转
    this.$router.push({
    path: `/describe/${id}`,
    })

}

        

路由配置

   {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id

第二种方法

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

 this.$router.push({
      name: 'Describe',
      params: {
        id: id
      }
})

路由配置

 {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

子组件获取参数

this.$route.params.id

第三种方法

父组件：使用path来匹配路由，然后通过query来传递参数，这种情况下 query传递的参数会显示在url后面?id=？

this.$router.push({
     path: '/describe',
     query: {
          id: id
      }
})

路由配置

 {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

子组件获取参数

this.$route.query.id

 

命名路由

通过一个名称来标识一个路由显得更方便，特别是在链接一个路由，或者是执行一些跳转时。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
}

 要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

 

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

 相当于$router.push()

this.$router.push({ name: 'user', params: { userId: 123 }})

导航守卫

1. 全局前置导航守卫

   router.beforeEach((to,from,next) =>{
       ......
       next()        //勾子最后必须调用next()，否则路由无法跳转
   })    

2. 全局后置导航守卫

   router.afterEach((to,from) => {
       .....
   })

3. 全局解析守卫,和 router.beforeEach() 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

   router.beforeResolve((to,from,next) =>{
       ......
       next()        //勾子最后必须调用next()，否则路由无法跳转
   })   

4. 路由独享守卫，在route里定义

   const router = new VueRouter({
     routes: [
       {
         path: '/foo',
         component: Foo,
         beforeEnter: (to, from, next) => {
           .....
   　　     next()
   
         }
       }
     ]
   })

5. 组件内的守卫

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

 

完整的守卫流程

• 导航被触发。
• 在失活的组件里调用离开守卫。
• 调用全局的 beforeEach 守卫。
• 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
• 在路由配置里调用 beforeEnter。
• 解析异步路由组件。若有，先下载异步组建。
• 在被激活的组件里调用 beforeRouteEnter。
• 调用全局的 beforeResolve 守卫 (2.5+)。
• 导航被确认。调用全局的 afterEach 钩子。再调用onReady（仅首次加载页面完响应，以后切路由都不会）。
• 非重用组件，开始组件实例的生命周期 beforeCreate,created,beforeMount,mounted
• 触发 DOM 更新。
• 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。