1.去掉去掉网址里的"/#"
const router = createRouter({
history: createWebHistory(),//createWebHistory可去掉网址里的"/#"
routes,
})
2.给网页命名
网页标题和meta配合,全局前置守卫:任何页面的访问都要经过这里
meta: {
title: '预约查询'
},
// to:要去哪里的路由信息,from:从哪里来的路由信息,next:通行的标志
router.beforeEach((to, from, next) => {
document.title = to.meta.title ? to.meta.title : 'XXXX//重定向管理平台';
// to.matched 是一个数组(匹配到是路由记录)
// to.matched.some(record => record.meta.requiresAuth)
if (to.meta.requiresAuth) {
if (!store.state.user) {
// 跳转到登录页面
next({
name: 'login',
query: { // 通过 url 传递查询字符串参数
redirect: to.fullPath // 把登录成功需要返回的页面告诉登录页面
}
})
} else {
next() // 允许通过
}
} else {
next() // 允许通过
}
})
3. 网页重定向(给网页自主设置首页)
{
path: '/',
redirect: { name: "login" },//重定向
},
4.组合index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
redirect: { name: "login" },//重定向
},
{
name: 'login',
path: '/login',
meta: {
title: '登录'
},
component: () => import("@/login.vue"),//位置
},
{
name: 'App',
path: '/App',
component: () => import("@/App.vue"),//位置
children: [
{
name: 'AppMain',
path: '/',
component: () => import("@/views/AppMain.vue"),
redirect: { name: "index" },
children: [
{
path: "index",//子路由前不需要加斜杠 '/'
name: "index",
meta: {
// requiresAuth: true,//requireAuth属性作用是表明该路由是否需要登录验证
title: '首页'
},
component: () => import("@/views/index.vue"),
},
{
name: "two",
path: "two",
meta: {
// requiresAuth: true,//requireAuth属性作用是表明该路由是否需要登录验证
title: '二页'
},
component: () => import("@/views/indexPage/two.vue"),
},
],
}
]
},
]
const router = createRouter({
history: createWebHistory(),//createWebHistory可去掉网址里的"/#"
routes,
})
//网页标题和meta配合,全局前置守卫:任何页面的访问都要经过这里
// to:要去哪里的路由信息,from:从哪里来的路由信息,next:通行的标志
router.beforeEach((to, from, next) => {
document.title = to.meta.title ? to.meta.title : 'XXXX管理平台';
// to.matched 是一个数组(匹配到是路由记录)
// to.matched.some(record => record.meta.requiresAuth)
if (to.meta.requiresAuth) {
if (!store.state.user) {
// 跳转到登录页面
next({
name: 'login',
query: { // 通过 url 传递查询字符串参数
redirect: to.fullPath // 把登录成功需要返回的页面告诉登录页面
}
})
} else {
next() // 允许通过
}
} else {
next() // 允许通过
}
})
export default router