Vue Router 笔记

1. 路由管理

安装

方式一: 采用单页面CDN引入方式使用.

方式二: 基于vite构建的前端项目工程,安装依赖:

在项目根目录下, 安装:

npm install vue-router@4 -s

检查项目根目录下package.json中的dependencies是否多出: "vue-router"依赖.

路由简单使用

1. 在src/components中创建demo1.vue和demo2.vue。

<template><h1>第一个页面</h1>
</template><script>export default{}
</script><style>
</style>

2. 修改src/App.vue。

<script>export default{name: "App",components: {}}
</script><template><h1>HelloWorld</h1><p><router-link to="/demo1">page1</router-link><router-link to="/demo2">page2</router-link><router-view></router-view></p>
</template><style>
</style>

3. 修改src/main.js。

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHashHistory} from 'vue-router'
import demo1 from './components/demo1.vue'
import demo2 from './components/demo2.vue'
const app = createApp(App)
const router = createRouter({history: createWebHashHistory(),routes: [{path: '/demo1',component: demo1},{path: '/demo2',component: demo2}]
})
app.use( router )
app.mount('#app')

4. 测试: npm run dev 启动访问: localhost:3000/

带参路由

1. 添加组件: User.vue

<template><h1>编号: {{ $route.params.uid }}</h1><h1>账号: {{ $route.params.username }}</h1>
</template><script>export default{}
</script><style>
</style>

2. 编写main.js

import user from './components/User.vue'
{path: '/user/:uid/:username' , component: user}

3. 测试访问:

问题: 采用路由参数时, 切记,相同的组件对象在导航地址切换的时候只会创建并复用,不会每次路由请求都刷新组件,故组件上的数据请求会更新，但是生命周期方法中的数据请求逻辑不会更新多次加载，故发现:

<template><h1>编号: {{ "将更新"+$route.params.uid }}</h1><h1>账号: {{ $route.params.username }}</h1>
</template><script>export default{mounted() {alert("只会加载一次: " +this.$route.params.uid);}}
</script><style>
</style>

解决办法: 采用导航守卫的方式来回调处理:

beforeRouteUpdate(to,from) {alert( "to的数据为: " + to.params.uid +" - from的数据为: " + from.params.uid );
}

路由的匹配规则

问题1： 发起/user/1请求时，无法区分以下两个路由.

{path: '/user/:username' , component: user1}
{path: '/user/:uid' , component: user2}

解决1:

{path: '/user/a/:username' , component: user1}
{path: '/user/b/:uid' , component: user2}

解决2: 基于正则.

{path: '/user/:username' , component: user1}
{path: '/user/:uid(\\d+)' , component: user2}

+ 表示1个或多个. :uid*表示可以出现0或多个编号 /1/2/3 , 将返回[1,2,3]

? 表示当没有传递uid也可以匹配成功.

{path: '/user/:uid?' , component: user2}

路由的嵌套

新建Teacher.vue：

<template><h1>teacher页面....{{ $route.params.teachername }}</h1>
</template><script>export default{}
</script><style>
</style>

修改User.vue 组件: 调整新增的Teacher.vue组件到User中渲染输出,不在到App.vue

<template><h1>编号: {{ "更新"+$route.params.uid }}</h1><h1>账号: {{ $route.params.username }}</h1>//指定输出位置:<router-view></router-view>
</template>

修改main.js配置:

import teacher from './components/Teacher.vue'
{path: '/user/:uid/:username' , component: user,children: [//切记不用/开头{path: 'teacher/:teachername',component: teacher}]
}

测试发起请求:
http://localhost:3000/#/user/38/zhangsan/teacher/laowang

2. 页面导航

2.1 使用路由跳转

App.vue：

方式一:

<router-link to="/demo1">page1</router-link>

修改为:

方式二:

<button @click="todemo1">去demo1</button>

并增加:

methods:{todemo1(){this.$router.push({path:'/demo1'})}
}

方式三:

main.js: {path: '/demo2',component: demo2 , name: 'demo2_router'} 取名.

<button @click="todemo2">去demo2</button>

并增加:

methods:{Todemo2(){this.$router.push({name: ‘demo2_router’})}
}

2.2 路由跳转并传递参数

main.js: {path: '/demo2/:a/:b',component: demo2 , name: 'demo2_router'} 取名.

<button @click="todemo2">去demo2</button>

并增加:

methods:{Todemo2(){this.$router.push({name: ‘demo2_router’,
params:{
a: 10,
b: 20
}})}
}

相当于:

<router-link :to="{ name: 'demo2_router',params:{b: 120,a: 125} }">page2</router-link>

测试:

Demo2.vue组件: {{$route.params.a}}{{$route.params.b}}

3. 路由视图

App.vue中:

<router-view name=”top”></router-view>
<router-view name=”main”></router-view>
<router-view></router-view>

Main.js中: 当遇到一个请求/demo1时，响应在主页面中，需要加载三个组件显示。

{path: '/demo1',components:{
top:  demo1,
main: demo2,
default: demo3
}}

4. 路由重定向

Main.js中: 当遇到一个请求/demo1时，响应在主页面中，需要加载三个组件显示。

{path: '/demo1',component:demo1,name:”d1”},
{path: '/to_demo1',redirect: ‘/demo1’} 或者{path: '/to_demo1',redirect: {name: ‘d1’}}

动态重定向: 例如,登录才让路由访问,否则重定向其他位置.

{path: '/to_demo1',redirect: to => {
If(){
Return { path: ‘/demo1’ };
}else{
Return { path: ‘/demo2’ };
}
}}

5. 路由传参

问题: demo1.vue中每次解析数据{{ $route.param.uid }} 这种方式不如 {{uid}}方便.

解决:

demo1.vue:

{{ uid }}export default{
props: [‘uid’]
}

Main.js传递:

{path: '/demo1',component:demo1,props:route => {
Return {
Uid: route.params.uid,
Other: ‘110’
}
}},

6. 路由导航守卫

作用: 决定路由跳转时，是否通过本次跳转.

Main.js:

全局前置守卫:

Router.beforeEach(( to , from ) => {
to为跳转的路由对象 , from 为离开的路由对象
//可以增加登录状态校验
Return { name: “toLogin” }
})

全局后置守卫:

Router.afterEach(( to , from , failure ) => {
//虽然不能改变导航，但是可以记录异常信息
Console.log( failure );
})

某个路由注册导航守卫:

Main.js:

{ path: “/d1” , component: demo1 , beforeEnter: router => {
Return false;
} }

也可以设置为:

Export default{
beforeRouteEnter(to , from){
//前置守卫
Return true;
},beforeRouteUpdate(to , from){
//路由参数更新守卫}}

7. 动态路由

作用： 可在程序中控制增加路由和移除已注册的路由.

相当于动态注册路由对象:

Import demo2 from ‘./Demo2.vue’
Export default{
created(){
This.$router.addRoute({
Path：‘/d2’,component: demo2,name=”demo2”
});
}
}

移除:

this.$router.removeRoute(“demo2”)