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属性(数组)创建嵌套路由

1 const routes = [
2   { path: '/', component: Home },
3   { path: '/foo', component: Foo ,children:[
4     {path:'foo1',component:Foo1},　　　　//这个路径不需要加 / 
5     {path:'foo2',component:Foo2},
6     {path:'foo3',component:Foo3},
7   ]},
8   { path: '/bar', component: Bar },
9 ]

app页面

1 <div id="app">
2   <p>
3     <router-link to="/">index</router-link>
4     <router-link to="/foo">Go to Foo</router-link>
5     <router-link to="/bar">Go to Bar</router-link>
6   </p>
7   <router-view></router-view>
8 </div>

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

 1 const Home = { template: '<div>home</div>' }
 2 const Foo = { template: `
 3   <div>
 4     <p>
 5       <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>  
 8     </p>
 9     <router-view></router-view>
10   </div>
11   ` }
12 const Bar = { template: '<div>bar</div>' }
13 const Foo1 = { template: '<div>Foo1</div>' }
14 const Foo2 = { template: '<div>Foo2</div>' }
15 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

 

命名路由

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

1 const router = new VueRouter({
2   routes: [
3     {
4       path: '/user/:userId',
5       name: 'user',
6       component: User
7     }
8   ]
9 }
 要链接到一个命名路由，可以给 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 的回调函数。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/NExt-O/p/14089667.html