路由

一、路由的作用

vue的路由使用在SPA应用中的组件跳转，相当于多页面的 a标签。

二、路由的基本使用

1、引入js文件的方式

1）、引入vue-router.js文件

<script src="js/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2）、定义若干个组件(为了跳转用)

let goodlist = { template:"<div>商品列表</div>" } let goodsdetail = { template:"<div>商品详情</div>" }

3）、定义路由对象

3.1）路由配置（json数组）

let routes = [ { path:'/goodslist', component:goodlist }, {path:'/goodsdetail',component:goodsdetail} ];

3.2)、实例化一个vueRouter对象

let router = new VueRouter({ routes });

4）、挂载vueRouter对象

实例化vue对象，（把vueRouter对象，挂载（注册）到vue对象里）

let vm = new Vue({ el:"#app", router:router });

5）、跳转代码（声明式）

<h1>路由跳转</h1> <hr/> <router-link to='/goodslist'>商品列表</router-link> <router-link to='/goodsdetail'>商品详情</router-link> <hr/> <router-view></router-view>

解释：

: 超链， 相当于标签a 。

: 组件显示的位置。

2、模块化的方式（脚手架里）

脚手架安装时，会默认安装vue-router。

1）、安装引入注册

npm i vue-router -S // src/main.js import router from './router/index'; new Vue({ el: '#app', router, ……………… })

2）、定义组件（单文件组件）

如：HelloWorld.vue 、 Home.vue

3）、路由配置模块（定义路由对象、配置路由）

// src/router/index.js import Vue from 'vue' //1. 引入路由包 import Router from 'vue-router' //2. 安装插件包到Vue上, Vue.use(Router) //3. 路由配置 let routes = [ {path: '/', component: HelloWorld} {path: '/home',component: Home}, //route 一条路由的配置 ] //4.路由实例 let router = new Router({ //插件路由对象 // routes:routes routes, }); //5.导出路由实例，让它去控制vue根 export default router

4）、跳转

4.1）、声明式跳转

<router-link to="/home">声明式跳转</router-link> <router-link to="/home" tag='li'>声明式跳转</router-link> <router-link to="/home" tag='li' >声明式跳转</router-link> <router-view>展示区</router-view>

router-link 组件属性:

​ to:跳转的路径

​ tag=‘li’ 指定编译后的标签，默认是 a 标签。 ​ router-link和router-view组件是vue-router插件提供的

4.2）编程式跳转（编程式导航）

this.$router.push(字符串/对象)：添加一个路由 （记录到历史记录) // 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数，变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 注意：如果提供了 path，那么params 会被忽略

2）、this.$router.replace({name:’…’}) //替换一个路由 （不记录到历史记录)

3）、this.$router.go(-1|1)|back() //回退/前进

三、动态路由匹配

1、路由参数

路由配置

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

跳转

<router-link to="/user/01001">用户01001的信息</router-link>

组件中获取id的值

模板里的写法： $route.params.id 脚本里的写法: this.$route.params.id

2、捕获所有路由或 404 Not found 路由

1)、通配符 *

'*' 会匹配所有路径 '/user-*' 会匹配以 `/user-` 开头的任意路径

注意：路由匹配的顺序是按照路由配置的顺序进行的，所以，你肯定不能把 * 的路径放在最前面，否则，后面的路由配置都不起作用了。

当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分。

如：

路由配置：

{ // 会匹配以 `/user-` 开头的任意路径 path: '/user-*' }

路由跳转：

this.$router.push('/user-admin')

组件里：

this.$route.params.pathMatch // 'admin'

404

{ path: '*', component: NoPage组件 }

四、命名路由

给路由起个名字，就可以使用名字来指定路由

1、路由配置

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

2、跳转

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

五、重定向

{ path: '/', //默认页 redirect: '/home' //配置型跳转 },

六、路由传参和props

​ 一个组件在项目中，有两种使用方式（组件显示在浏览器上）：

​ 1、自定义标签的方式

​ 2、使用路由跳转后显示

​ 如果， 一个组件需要从外部传入数据， 并且在项目中，这两种方式的使用都会出现，那么，在组件内部就需要适应这两种情况。

如何使用 props 将组件和路由解耦：

​ props 被设置为 true，route.params 将会被设置为组件属性。

路由配置：

{ path: '/user/:id', component: User, props: true },

组件：

const User = { props: ['id'], template: '<div>User {{ id }}</div>' }

七、嵌套路由

子路由嵌套

// src/router/index.js const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { // 当 /user/:id/profile 匹配成功， // UserProfile 会被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, { // 当 /user/:id/posts 匹配成功 // UserPosts 会被渲染在 User 的 <router-view> 中 path: 'posts', component: UserPosts } ] } ] })

八、路由模式

// src/router/index.js let router = new VueRouter({ //插件路由对象 routes, // mode:'hash'//哈希模式 location.href mode:'history'//历史记录 history.pushState });

九、扩展

路由守卫

全局守卫

// src/router/index.js //前置 router.beforeEach((to, from, next) => { // to: 目标路由 // from: 当前路由 // next() 跳转 一定要调用 next(false);//不让走 next(true);//继续前行 next('/login')//走哪 next({path:'/detail/2',params:{},query:{}})//带点货 // 守卫业务 if(to.path=='/login' || to.path=='/reg' || to.path=='/register'){ next() }else{ next('/login'); } }) //后置 router.afterEach((to,from)=>{ //全局后置守卫业务 })

路由独享守卫

// src/router/index.js { path: '/user', component: User, beforeEnter: (to,from,next)=>{ //路由独享守卫 前置 console.log('路由独享守卫'); if(Math.random()<.5){ next() }else{ next('/login') } } },

独享，没有后置

组件内部守卫

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

路由元信息

定义路由的时候配置 meta 字段

//src/plugins/router.js { path: '/home', component: Home, meta: { requiresAuth: true } }

访问 meta 字段

this.$route.meta to.meta

路由懒加载

​ 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

补充：

$router 和 $route的区别：

在组件里，

$router：这是植入到根的vueRouter对象

$route: 当前路由对象。

在

任何