页面路由
每个页面路由,是一个对象{ },对象里面有很多属性,这些属性有不同的功能。
多个这些对象组成了Vue Router 路由,见Vue-Vue Router 路由
=======================
路由路径 path
表示访问的路径,比如你的网站基本路径是www.baidu.com,那么下面这个/home 表示用户访问 www.baidu.com/home,显示
1、动态路由
path:”/user/:id” 中,:id相当于告诉别人我这个id是动态的,通过to传进来。
如果你只访问 /user,现在是不显示东西的,必须访问/user/xxx才会显示user组件
id可以通过拼接的方式,在.vue组件里面动态给与
获取动态路由的值
查看Vue-Vue Router 路由
如上面的例子,通过route 的 params属性获得{ id : 123}
2、路由匹配
没有匹配到path的,会显示空,并提示警告,这样用户体验不好。
可以通过路由设置,假如没有匹配到任何页面,就显示404notfound页面。
如下图,把这个加入到const routes 里面,放在最后面,这样上面所有页面都匹配不上时,就会匹配这个404页面。
pathMatch( )参数是正则表达式,. 表示任意字符,*表示0个或多个字符
{
path: "/:pathMatch(.*)",
redirect:"/main"
}
到时候可以通过 route.pathMath 拿到后面输入的内容
如果后面加个*,可以把这些换成数组
{
path: "/:pathMatch(.*)*",
redirect:"/main"
}
组件 component
组件,就是这个路由路径path对应的是哪个组件。如下代码,就可以把路径/HelloWorld 和组件 HelloWorld对应起来,用户访问 xxx/HelloWorld,路面对应的页面就会跳转到组件HelloWorld
// router/index.js
import HelloWorld from '/@/views/HelloWorld.vue'
const routes = [
{ path: '/HelloWorld',name: 'HelloWorld', component: HelloWorld },
]
懒加载
如果是按上面的方式引入组件,那么外层页面加载时,会把HelloWorld页面资源也一起加载,此时HelloWorld并没有被访问,没访问的页面都一起加载进来,有点浪费,同时也影响外层的渲染速度。
我们希望用户访问HelloWorld的时候才加载HelloWorld的资源,因此可以通过懒加载实现。
只要把上面的代码改为,通过import函数引入组件,就是懒加载。
// router/index.js
// import HelloWorld from '/@/views/HelloWorld.vue'
const routes = [
{ path: '/HelloWorld',name: 'HelloWorld', component: ()=> import('/@/views/HelloWorld.vue') },
]
同时项目打包时,懒加载的组件会另外打包,不会和主文件打包在一起,需要用到时再读取对应组件的js文件。
如下图,HelloWorld的组件资源会额外打包成一个js文件,同时生成对应的映射文件.map
如果我们想知道哪个文件对应的是 HelloWorld 组件,可以在import函数里面添加魔法注释(webpack的特性,vuecli是基于webpack的,因此vuecli也可以)
这个注释是固定写法,到时候会根据 “名字” 来生成打包的名字
重定向 redirect
就是访问某个路径,可以设置自动跳转到其他路径去,就叫重定向(重新确定方向)
应用就比如网站默认的根路径 / ,重定向到其他路径上
自定义数据 meta
可以给这个路由自定义一些数据,到时候再.vue文件里面可以获取到这个自定义数据
命名路由 name
给路由命名,这样跳转的时候可以直接使用这个名字
// router/index.js
const routes = [
{
path: '/user/:username',
name: 'user', // 命名
component: User
}
]
然后.vue文件里面跳转时,可以通过对象的方式,跳转到这个名字
<router-link :to="{ name: 'user', params: { username: 'erina' }}">
User
</router-link>
或
router.push({ name: 'user', params: { username: 'erina' } })
子路由 children
嵌套路由
1、创建子路由
router文件夹内的index.js,用children 表示子页面
path无需写成/home/product,路由会自动帮我们加上,如果你这样写反而找不到路径
2、父组件页面设置标签和跳转
home组件,设置
也可以通过路由对象router 的方法跳转,可以查看 Vue Router - 路由跳转对象 router
===================
在页面中获取属性 route
说明
注意,route 和 router 不一样
route 是路由属性对象,显示页面的路由属性
router 是路由跳转对象,掌管跳转页面的方法
路由属性对象,是在.vue文件里面,获取当前路由的一些属性,如下,比如路径path、动态路由数据params、命名路由name等。
属性可以参考页面路由属性 Vue Router - 页面路由属性 route
用法
Vue router 3.X ,对应Vue 2.x
假设是一个Home.vue文件,可以通过this.$route.属性 获得route的属性,如下
<template>
<div>{{$route.params.id}}</div>
</template>
<script>
export default {
data(){
return {
path:this.$route.path // 显示 /user/why
}
},
}
</script>
下面是部分属性的解释:
$route.path 路径:显示当前激活的路由页面的路径,总是绝对路径
$route.params 路由参数,一个 key/value 对象,和动态路由相关,如果没有路由参数,就是一个空对象
$route.query URL 查询参数:一个 key/value 对象,表示 URL 查询参数。
例如,对于路径 /foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。
$route.fullPath 完整路径和URL查询参数:完成解析后的 URL,包含查询参数和 hash 的完整路径。
$route.name 路由页面的名字:名字在index.js 文件里面设置路由参数和映射
$route.redirectedFrom 重定向页面的名字:如果存在重定向,即为重定向来源的路由的名字。
Vue router 4.X ,对应Vue3.x
要在setup( )内使用,相当于$route
<script>
import { useRoute } from "vue-router"
export default {
setup(){
const route = useRoute();
// 通过 route.属性 获取里面的数据
const path = route.path // 显示 /user/why
return {
path
}
}
}
</script>