Vue学习之路由(Router)

文章目录

Vue学习之路由(Router)
一、路由是什么？
二、Vue Router的安装
- 1.直接下载/CDN
- 2.NPM安装
三、路由的基础使用
- 1.定义路由组件
- 2.定义路由
- 3. 创建Router实例
- 4.注册路由
- 5.使用路由
四、动态路由
- 1.动态匹配
- 2.响应路由参数的变化
五.路由守卫
- 1.全局守卫
- 2.路由独享守卫
- 3.组件内部守卫
六、嵌套路由
总结：

一、路由是什么？

在计算机网络原理中，路由是指路由器从一个接口上收到数据包，根据数据包的目的地址进行定向并转发到另一个接口的过程。可以想象为快递转运站，根据包裹的地址信息将快递送到指定地点。

在web中的路由也是类似的，route根据url的不同来跳转到相应的url页面

Vue提供了路由的组件Vue Router

二、Vue Router的安装

1.直接下载/CDN

资源地址：https://unpkg.com/vue-router/dist/vue-router.js

2.NPM安装

npm install vue-router

三、路由的基础使用

1.定义路由组件

路由要有映射的组件

let myA = {template:`<div>A组件</div>`}let myB = {template:`<div>B组件</div>`}

2.定义路由

    let routes = [{path: '/',component: myA,//路由重定向redirect: '/a',//redirect: { name: 'aRoute' }，},{path: '/a',component: myA，name: 'aRoute',alias: '/aa',},{path: '/b',component: myB}];

一个最基础的路由对象有这两个属性：

path：路由地址
component：映射的组件

除此之外，Router还有一些其他属性

name：名称，可方便以后的跳转
alias：别名，可以通过别名来访问路由
redirect：路由重定向，比如你想让组件一开始就在某个路由上，就可以用重定向。
当用户访问 /时，URL 将会被替换成 /a，然后匹配路由为 /a.

3. 创建Router实例

//2.创建路由器对象let router = new VueRouter({routes: routes})

4.注册路由

 new Vue({el: '#app',router: router,data: {msg: 'hello'},methods: {},})

这里的router就是用来注册路由器的。

5.使用路由

<div id='app'><!-- 使用路由 --><div><router-link to="/a">去A路由</router-link><router-link to="/b">去B路由</router-link><a href="#/a">a标签去A路由</a></div><div><!-- 组件显示的位置 --><router-view></router-view></div></div>

这里 <router-link></router-link>的显示效果和a标签是一样。你同样可以是啊标签来进行路由的跳转

四、动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来显示不同的内容。那么，我们可以使用动态路由

1.动态匹配

  {path: '/user/id/:id/username/:username'，component: myA，},

动态路由在路由地址上使用冒号来接受数值。

<router-link to="/user/id/1/username/zhangsan">去A路由</router-link>

当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。

2.响应路由参数的变化

如果我们想要页面根据路由路径参数的不同去做相应的变化，可以有几种方式
最简单就是watch监听

<div id='app'><!-- 使用路由 --><div><router-link to="/user/id/1/username/zhangsan">去A路由</router-link><router-link to="/b">去B路由</router-link></div><div><router-view></router-view></div></div><script>let myA = {data() {return {id: null,username: ''}},template:`<div>A组件{{id}}--{{username}}</div>`,  //监听watch: {$route(to, from) {// to是新路由，from是旧路由   // console.log(to, from);this.id = to.params.id;this.username = to.params.username;}}}let myB = {template:`<div>B组件</div>`}let routes = [{path: '/user/id/:id/username/:username',component: myA},{path: '/b',component: myB}];let router = new VueRouter({routes: routes})new Vue({el: '#app',router: router,data: {msg: 'hello'},methods: {},})</script>

监听是Vue中的方法，Vue router还提供了路由守卫(也叫导航守卫)，路由守卫是专门用来监听路由的

五.路由守卫

1.全局守卫

全局守卫定义在全局作用域中，所有的路由变化都会触发该守卫
全局守卫有两种：前置和后置，分别在路由改变前后执行

     //前置守卫router.beforeEach((to, from, next) => {console.log(to, from, next, '-----beforeEach-----');next();})//后置守卫router.afterEach((to, from) => {console.log(to, from, '------afterEach------');})

两者都有 to 和 from,to是新路由 ,from是旧路由。
需要注意的是，前置守卫有next函数，这个函数是用来执行到下一步的，如果在前置守卫中没有next，则无法执行下一步。

2.路由独享守卫

路由独享守卫写在路由对象内部,只有在该路由内有路由变化才会触发

let routes = [{path: '/b',component: myB,// 设置路由独享守卫beforeEnter(to, from, next) {console.log(to, from, next, '------beforeEnter------');next();}}];

3.组件内部守卫

组件内守卫写在组件内部，只有在该组件的路由变化才会触发该守卫
组件内守卫有三种，分别在进入路由、更新路由、离开路由时触发

let myA = {template:`<div>A组件</div>`,// 2.3 组件内守卫beforeRouteEnter(to, from, next) {console.log('------beforeEnter------');next();},beforeRouteUpdate(to, from, next) {console.log('------RouteUpdate------');next();},beforeRouteLeave(to, from, next) {console.log('------RouteLeave------');next();}}

六、嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。在不同层级都有<router-view></router-view>，这就可能产生问题，当点击最下层的路由时，路由组件可能会显示在最上层的<router-view></router-view>上，这就需要使用给路由设置层级的父子关系。
给路由设置子路由要使用children

let routes = [{path: '/student',component: Student,},{path: '/course',component: Course,children: [{path: 'grade',component: CourseGrade,},{path: 'plan',component: CoursePlan,},]},]

有了层级关系之后，Vue在渲染的时候就会根据这个层级关系，找到合适<router-view></router-view>再进行渲染。

总结：

今天总结的内容较多，Router是Vue中非常重要的一个东西，在做项目的时候会经常用到，这里整理的都是一些比较常用的东西，还有一些别的内容我会后续在整理出来