Vue路由

本文最后更新于:2022年5月3日 下午

路由模板

🌰提供路由渲染

router-link标签提供路由地址选项,在to属性中指定路由地址

1
2
3
4
5
<nav>
<!-- 多组路由选项 -->
<router-link to="/" >地址一</router-link>
<router-link to="/posts">地址二</router-link>
</nav>

router-view标签渲染出选中路由

1
2
3
<main>
<router-view></router-view>
</main>

🌰定义路由组件

1
2
3
4
const [HOME, POSTS] = [
{ template: '<div>主页</div>' },
{ template: '<div>文章</div>' }
]

🌰定义路由

pathcomponent为必选项

1
2
3
4
const routes = [
{ path: '/', component: HOME },
{ path: '/posts', component: POSTS }
]

🌰创建实例并配置routes

1
2
3
4
const router = new VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes, // ES6 routes == routes:
})

🌰创建并挂载路由

1
2
const app = Vue.createApp({})
app.use(router).mount('#app')

获取路由

使用this.$route或在setup内用createRouter创建可获得路由信息对象

1
2
3
this.$route.path      //
this.$route.
this.$params // 动态路由参数的对象

动态路由

/:rute来表示路径参数

不同参数都会映射至父级路径

1
2
3
const routes = [
{ path: '/user/:id', component: USER }
]

路由匹配

🌿同父级路径的动态路由

在路径后加/:rute(reg)来匹配不同路由

1
2
3
4
const routes = [
{ path: '/:id(\\d+)', component: USER }, // 数字才匹配
{ path: '/:piicture', component: PICTURE } // 其他情况匹配
]

🌿多级动态路由

在路径末加*(零个以上),+(一个以上)来匹配重复项

1
2
3
const routes = [
{ path: '/:option(//d+)*' component: OPTIONS }
]

🌿可选动态路由

在路径末加?表示路径至多有一个

1
2
3
4
const routes = [
// 有无name均会渲染USER
{ path: '/:id(//d+)/:name?', component: USER }
]

嵌套路由

在路由children属性内可添加子路由,在父组件的router-view标签内渲染子组件

子路由设置path''为默认时渲染

1
2
3
4
5
6
7
8
9
10
11
const routes = [
{
path: '/:id(\\d+)',
component: USER,
children: [
{ path: '', component: DEFAULT },
{ path: 'message', component: MESSAGE },
{ path: 'pictures', component: PICTURES }
]
}
]

编程式导航

🥑导航至不同位置

触发router-link即调用router.push()方法

path属性时,params属性将失效

1
2
3
4
5
6
7
8
9
router.push('/users/eduardo')                                   // 字符串路径

router.push({ path: '/users/eduardo' }) // 带有路径的对象

router.push({ name: 'user', params: { username: 'eduardo' } }) // 命名的路由,并加上参数,让路由建立 url

router.push({ path: '/register', query: { plan: 'private' } }) // 带查询参数,结果是 /register?plan=private

router.push({ path: '/about', hash: '#team' }) // // 带 hash,结果是 /about#team

🥑替换当前位置

使用replace不会向history增加记录而是替换当前记录

声明式:

1
<router-link to="/user" replace></router-link>

编程式:

1
2
router.replace({ path: '/user' })
router.push({ path: '/user', replace: true }) // 等效于

命名路由

使命名的路由可简便的调用

1
2
3
4
5
6
7
const routes = [
{
path: '/user/:id/:name',
name: 'user', // 命名为`user`
component: USER
}
]

编程式:

1
2
3
4
5
6
7
router.push({
name: 'user',
params: { // 路由参数
id: 001,
name: 'Jonathan'
}
})

声明式:

1
2
3
<router-link to="{ name: 'user', params: { id: 001, name: 'Jonathan' } }">
个人信息
</router-link>

命名视图

可以在同一组件内渲染多个router-view

1
2
3
4
<!-- name默认值为default -->
<router-view></router-view>
<router-view name="Docs"></router-view>
<router-view name="Header"></router-view>

为多个组件指定渲染视图

1
2
3
4
5
6
7
8
9
10
const routes = [
{
path: '/',
components: { // 需加`s`
default: Menu,
Docs: Docs, // ES6简写`Docs,`
Header: Header
}
}
]

重定向

路由1跳转至路由2

可将没有锚点的路由/重定向至主页面路由/home

重定向可以是路径,方法,命名路由

1
2
3
4
const routes = [
{ path: '/', redirect: '/home' }, // 可不绑定组件
{ path: '/home', component: Home }
]

别名

路由组件传参

🍆布尔模式

设置propstrue即可将router.params属性赋给组件的props

1
2
3
4
5
6
7
8
const USER = {
props: ['id']
template: '<div>{{ id }</div>'
}

const routes = [
{ path: '/user/:id', component: USER, props:true }
]

🍆命名视图

可为不同的视图设置props

1
2
3
4
5
6
7
8
9
10
11
12
13
const routes = {
path: '/user/:id',
components: {
default: User,
Docs,
Posts
},
props: {
default: false,
Docs: true,
Posts: false
}
}

🍆对象模式

导航守卫

🥬全局前置守卫

全局前置守卫会按创建顺序执行,在所有守卫resolve完前状态均为pending

beforeEach((to, from[, next]) => {})

返回true或不返回表示导航有效

返回false取消导航,回至from

返回路由对象导航至该路由对象

to:正在进入的路由对象

from:正在离开的路由对象

  • next()

执行下一个

  • next(false)

停止导航,回到from

  • next(路由对象)

改变to路由对象

  • next(Error)

导航终止,Error传给回调router.onError

1
2
3
4
5
const router = new VueRouter({...})
router.beforeEach(('/user', '/home', next) => {
// 处理代码
next(...)
})

🥬全局后置钩子

后置钩子不会改变导航,不接受next,其用于改变页面标题等功能

afterEach((to, from[, failure]) => {})

🥬路由独享守卫

可以直接在routes中配置守卫,守卫只有从不同路由进入才触发,动态参数改变不触发

1
2
3
4
5
6
7
8
9
const routes = [
{
path: '/user/:id',
component: User,
beforEach: (to, from, next) => {
// ...
}
}
]

路由元信息

可以附加所需信息至meta属性,路由地址与导航守卫均可访问

1
2
3
4
5
6
7
8
const routes = [
{
// 其他配置
meta: {
isAuthentication: true
}
}
]

访问meta

1
2
$route.meta             // 访问父字段至子字段的meta
$route.matched[].meta // 访问路由数组中z的meta

数据获取


Vue路由
https://qingshaner.com/vue路由/
作者
清山
发布于
2022年1月23日
许可协议