app.vue

<template><div id="app"><router-link to="/home">首頁</router-link><router-link to="/about">關于</router-link><button @click="userClick">用戶</button><button @click="proClick">檔案</button><router-view></router-view></div> </template><script> export default {name: 'App',data(){return{userId:'geyao'}},methods:{userClick(){this.$router.push('/user/'+this.userId)},proClick(){this.$router.push({path:'/pro',query:{name:'geyao',age:18}})},} } </script><style></style>

?Home.vue

<template> <div> <h2> 我是首頁 </h2> <p>我是首頁內容</p> <router-link to="/home/news">新聞</router-link> <router-link to="/home/message">新聞</router-link> <router-view></router-view> </div> </template><script> export default{name:"Home" } </script><style scoped></style>

about.vue

<template> <div> <h2> 我是about </h2> <p>我是首頁內容</p> </div> </template><script> export default{name:"Home" } </script><style scoped></style>

User.vue

<template> <div> <h2> 我是user </h2> <p>我是首頁內容</p> <h2>{{userId}}</h2></div> </template><script> export default{name:"User",computed:{userId(){return this.$route.params.userId}} } </script><style scoped></style>

HelloWorld.vue

<template> <div> <h2> 我是about </h2> <p>我是首頁內容</p> <p>我是首頁內容</p> <p>我是首頁內容</p> <p>我是首頁內容</p> <ul> <li> 1 </li> </ul> </div> </template><script> export default{name:"Home" } </script><style scoped></style>

index.js

import VueRouter from 'vue-router' import Vue from 'vue' import Home from '../components/Home' import About from '../components/About' import User from '../components/User' import HomeNew from '../components/HelloWorld' import HomeMessage from '../components/Hello' import Profile from '../components/Profile' Vue.use(VueRouter)const routes = [{path: '/',redirect: '/home'}, {path: '/home',component: Home,children: [{path: 'news',component: HomeNew},{path: 'message',component: HomeMessage},]},{path: '/about',component: About},{path: '/pro',component: Profile},{path: '/user/:userId',component: User,meta: {title: '用戶'}},]//安裝插件 const router = new VueRouter({//配置之間的關系routes,mode: 'history',linkActiveClass: 'active' }) router.beforeEach((to, from, next) => {next()document.title = to.meta.title}) export default router

Hello.vue

<template> <div> <h2> 我是about </h2> <p>我是首頁內容</p> </div> </template><script> export default{name:"Home" } </script><style scoped></style>

profile.vue

<template> <div> <h2> 我是pro </h2> <p>我是首頁內容</p> <p>{{$route.query.name}}</p> <p>{{$route.query.age}}</p></div> </template><script> export default{name:"Home" } </script><style scoped></style>

運行結果

?

?

?

總結

以上是生活随笔為你收集整理的前端学习（2180）：vue-router全局导航守卫的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。