Article directory
1. Project initialization
2. Routing configuration rules
path: configure the route access path
name: give the route a name (name the route)
component: when accessing the route, the rendered component
{
path: '/',
name: 'index',
component: () => import('../views/IndexView.vue')
},
app.vue
vue-route tag role: the components matched by the route will be rendered here
<template>
<router-view/>
</template>
router-link tag role: route navigation (route jump link)
3. Declarative and programmatic navigation
Declarative Navigation
<router-link to="/login"></router-link>
<router-link :to="{path:'/login'}"></router-link>
programmatic navigation
It is recommended to use the name of the route to jump, and it is not recommended to directly write the path
<button @click="$router.push('/login')">登录按钮</button>
<button @click="$router.push({path:'/login'})">登录按钮</button>
<button @click="$router.push({name:'login'})">登录按钮</button>
$router: Routing object
When app.use(router) registers a route, it will set global properties for the app$router
<button @click="loginBtn">登录按钮</button>
<script>
export default{
methods:{
loginBtn(){
this.$router.push('/login')
}
}
}
</script>
By calling app.use(router), we can access it in any component as this.$routerand this.$routeraccess the current route as
4. Route redirection
When accessing http://localhost:8080/#/project this route
will jump to http://localhost:8080/#/login this route
{
path: '/project',
name:'project',
// 路由重定向配置
redirect:{
name:'login',
}
},
5. Nested routing
index.js: routing configuration
{
path: '/home',
name: 'home',
component: () => import('../views/HomeView.vue'),
// 配置home下面的且套路由
children:[
{
path:'/home/project',
name:'project',
component:()=>import('../views/ProjectView.vue')
},
{
path:'/home/interface',
name:'interface',
component:()=>import('../views/InterfaceView.vue')
},
{
path:'/home/report',
name:'report',
component:()=>import('../views/ReportView.vue')
}]
},
HomeView.vue component
<template>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1" @click="$router.push({name:'project'})">项目信息</el-menu-item>
<el-menu-item index="2" @click="$router.push({name:'interface'})">接口信息</el-menu-item>
<el-menu-item index="3" @click="$router.push({name:'report'})">测试报告</el-menu-item>
</el-menu>
<!-- home中嵌套路由的渲染位置（路由出口） -->
<router-view/>
</template>
<script>
</script>
<style>
</style>
pay attention
Write the unchanged content to the parent route, and reserve a route display position in the parent route. Write the changed content to the child route
Summarize
6. Dynamic matching of routing parameters
{
path:'/user/:id',
name:'user',
component: () => import('../views/UserView.vue')
},
Access routing: http://localhost:8080/#/user/666
UserView.vue component
Get the path parameters of the route
<template>
<h1>User页面</h1>
<!-- 获取路由的路径参数 -->
<h3>路由中匹配的id：{
{$route.params.id}}</h3>
</template>
<script>
</script>
<style>
</style>
Get the query parameters of the route
http://localhost:8080/#/user/666?name=kobe
<template>
<h1>User页面</h1>
<!-- 获取路由的查询参数 -->
<h4>查询参数name：{
{$route.query.name}}</h4>
</template>
<script>
</script>
<style>
</style>
pay attention
$router$routeThe difference between and :
$router: Route manager object, generally used for route jump
$route: Indicates the currently accessed route, used to obtain some information about the current route parameters
7. Pass routing parameters when navigating and jumping
<router-link :to="{name:'user',params:{id:888},query:{name:111}}">user页面</router-link>
<button @click="$router.push({name:'user',params:{id:666},query:{name:222}})">user按钮</button>
Eight, route navigation guard
Set routing navigation guards (controlling front-end routing access)
router.beforeEach(async (to, from) => {
/*
1、判断用户是否登录
1.1从本地获取用户身份信息（存储在cookie或者localstroge中的token，session）
window.cookieStore.get('token')
window.localStorage.getItem('token')
window.sessionStore.getItem('token')
1.2验证token是否有效
*/
// const isAuthenticated=true
// if (
// // 检查用户是否已登录
// !isAuthenticated &&
// // ❗️ 避免无限重定向
// to.name !== 'Login'
// ) {
// // 将用户重定向到登录页面
// return { name: 'Login' }
// }
// })
})
