Vue Router 笔记
1. 路由管理
安装
方式一: 采用单页面CDN引入方式使用.
方式二: 基于vite构建的前端项目工程,安装依赖:
在项目根目录下, 安装:
npm install vue-router@4 -s
检查项目根目录下package.json中的dependencies是否多出: "vue-router"依赖.
路由简单使用
- 在
src/components中创建demo1.vue和demo2.vue。
<template>
<h1>第一个页面</h1>
</template>
<script>
export default{
}
</script>
<style>
</style>
- 修改
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>
- 修改
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')
- 测试:
npm run dev启动访问:localhost:3000/
带参路由
- 添加组件:
User.vue
<template>
<h1>编号: {{ $route.params.uid }}</h1>
<h1>账号: {{ $route.params.username }}</h1>
</template>
<script>
export default{
}
</script>
<style>
</style>
- 编写
main.js
import user from './components/User.vue'
{path: '/user/:uid/:username' , component: user}
- 测试访问:
问题: 采用路由参数时, 切记,相同的组件对象在导航地址切换的时候只会创建并复用,不会每次路由请求都刷新组件,故组件上的数据请求会更新，但是生命周期方法中的数据请求逻辑不会更新多次加载，故发现:
<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”)