npm install vue-router
import { createRouter,createWebHashHistory } from 'vue-router'
//导入
import Home from "../Views/home.vue"
import About from "../Views/about.vue"
//创建路由对象,//建立映射关系
const router = createRouter({
history:createWebHashHistory (),//用于指定采用的模式。目前式哈希模式
routes: [
//一般开发里面都会写一个重定向的路径
{
path: '/', redirect: "/home"
},
{
path: '/home', component: Home
},
{
path: '/about', component: About
}
]
})
//导出
export default router
import { createApp } from 'vue'
import App from './App.vue'
//再次导入,告诉app,注意这里的使用方式
import router from './router/index'
createApp(App).use(router).mount('#app')
<template>
<p>标题</p>
<router-view></router-view>
<div class="nev">
<router-link to="Home">Home</router-link>
<router-link to="about">about</router-link>
</div>
</template>
<script setup>
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<router-link to="Home" replace>Home</router-link>
<router-link to="Home" replace>Home</router-link>
<router-link :to="{path:'/about'}">about</router-link>
.router-link-active{
color :blue;
}
//如果想要分包
const Home=()=>import("../Views/hone.vue")
const About=()=>import("../Views/about.vue")
<template>
<div><p>about的参数{{$route.params.id}}</p></div>
</template>
this.$route.params.id
<script setup>
import {useRoute} from "vue-router"
//获取router跳转的id
const route = useRoute()
console.log(route.params.id)
</script>
<script setup>
import {onBeforeRouteUpdate} from "vue-router"
//获取router跳转的id
onBeforeRouteUpdate((to,from)=>{
console.log(to,from)
console.log("form",from.params.id)
console.log("to",to.params.id)
})
</script>
{
name: "home",
path: '/home',
component: Home,
children: [
{
path: '/about',
component: About
}
]
},
<router-view></router-view>
let isAdmin = true
if(isAdmin){
router.addRoute({
path:"/Admin",
component:Admin
})
}
let isAdmin = true
if(isAdmin){
router.addRoute({
name:"Admin",
path:"/Admin",
component:Admin
})
router.addRoute('Admin',{
path:"Adminchild",
component:Adminchild
})
}
router.removeRoute('home')
const delrouter = router.addRoute({
name: "home",
path: '/home',
component: Home,
children: [
{
path: '/about',
component: About
}
]
})
delrouter()
console.log(router.getRoutes())
它有两个参数
它有返回值
可以是一个string类型的路径
可以是一个对象,对象中包含path,query,params等信息
// 路由导航拦截
// - 进行任何的路由跳转之前,传入到beforeEach中的函数都会被回调
router.beforeEach((to,from)=>{
//不写条件会在登录页陷入死循环
if(to.path!='/login'){
return "/login"
}
})
// 路由导航拦截
router.beforeEach((to, from) => {
const token = localStorage.getItem("token")
if (!token && to.path == '/home') {
return "/login"
}
return undefined//否则默认导航
})