安装
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 }})
导航守卫
- 全局前置导航守卫
router.beforeEach((to,from,next) =>{ ...... next() //勾子最后必须调用next(),否则路由无法跳转 })
- 全局后置导航守卫
router.afterEach((to,from) => { ..... })
-
全局解析守卫,和 router.beforeEach() 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。
router.beforeResolve((to,from,next) =>{ ...... next() //勾子最后必须调用next(),否则路由无法跳转 })
-
路由独享守卫,在route里定义
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { .....
next()
} } ] }) - 组件内的守卫
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 的回调函数。