vue3 + vue-router
基础
安装
vue add router
router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'Home',
component: HomeView
},
{
path: '/about',
name: 'About',
component: () => import('../views/AboutView.vue')
},{
path: '/new',
name: 'New',
component: () => import('../views/NewView.vue')
},{
path: '/course',
name: 'Course',
component: () => import('../views/CourseView.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
App.vue
<template>
<div class="menu">
<nav class="container">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>|
<!-- 三种方式 -->
<router-link to="/new">new1</router-link>|
<router-link :to="{path:'/new'}">new2</router-link>|
<router-link :to="{name:'New'}">new3</router-link>|
<router-link to="/course">course</router-link>
</nav>
</div>
<div class="container">
<router-view/>
</div>
</template>
<style>
.container{
width: 800px;
margin: 0 auto;
}
.menu {
background-color: aqua;
height: 40px;
line-height: 40px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
通过url传参数
App.vue
<template>
<!-- url传值 -->
<router-link :to="{name:'Course',query:{page:2,pageSize:10}}">course1</router-link>|
<router-link :to="{name:'Course',query:{page:3,pageSize:11}}">course2</router-link>|
</template>
CourseView.vue
<script setup>
import {onBeforeRouteUpdate, useRoute} from 'vue-router'
import {ref} from "vue";
const route = useRoute()
const name = ref('sv')
// 获取url参数
const page = ref(route.query.page||0)
const pageSize = ref(route.query.pageSize||0)
onBeforeRouteUpdate((to)=>{
page.value=to.query.page
pageSize.value=to.query.pageSize
})
</script>
URL动态参数
router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
//添加url params
path: '/detail/:id',
name: 'Detail',
component: () => import('../views/DetailView.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
App.vue
<template>
//传入id
<router-link :to="{name:'Detail',query:{page:3,pageSize:11},params:{id:2}}">detail1</router-link>|
</template>
DetailView.vue
<template>
<span>{{_id}}</span>
</template>
<script setup>
import {onBeforeRouteUpdate, useRoute} from "vue-router";
import {ref} from "vue";
const route = useRoute()
//获取params
const _id = ref(route.params.id)
onBeforeRouteUpdate((to)=>{
_id.value=to.params.id
})
</script>
<style scoped>
路由嵌套
router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import More2View from "@/views/More2View";
import More3View from "@/views/More3View";
const routes = [
{
path: '/',
name: 'Home',
component: HomeView
},
{
path: '/about',
name: 'About',
component: () => import('../views/AboutView.vue')
},{
path: '/new',
name: 'New',
component: () => import('../views/NewView.vue')
},{
path: '/course',
name: 'Course',
component: () => import('../views/CourseView.vue')
},{
//添加url params
path: '/detail/:id',
name: 'Detail',
component: () => import('../views/DetailView.vue')
},{
path: '/more',
name: 'More',
component: () => import('../views/MoreView.vue'),
children:[
{
path: '',
// 访问more 自动显示more1
// component: () => import('../views/More1View.vue'),
redirect:{name:'More1'}
},
{
path: 'more1',
name: 'More1',
component: () => import('../views/More1View.vue')
},{
path: 'more2',
name: 'More2',
component:More2View
},{
path: 'more3',
name: 'More3',
component:More3View
},
]
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
HomeView.vue
<template>
<h1>more</h1>
<nav>
<router-link to="/more/more1">more1</router-link>
<router-link :to="{name:'More2'}">more2</router-link>
<router-link :to="{path:'more3'}">more3</router-link>
</nav>
<router-view></router-view>
</template>
<script>
export default {
name: "MoreView"
}
</script>
<style scoped>
</style>
编程式导航
router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import More2View from "@/views/More2View";
import More3View from "@/views/More3View";
const routes = [
{
path: '/',
name: 'Home',
component: HomeView
},
{
path: '/about',
name: 'About',
component: () => import('../views/AboutView.vue')
},{
path: '/new',
name: 'New',
component: () => import('../views/NewView.vue')
},{
path: '/course',
name: 'Course',
component: () => import('../views/CourseView.vue')
},{
//添加url params
path: '/detail/:id',
name: 'Detail',
component: () => import('../views/DetailView.vue')
},{
path: '/more',
name: 'More',
component: () => import('../views/MoreView.vue'),
children:[
{
path: '',
// 访问more 自动显示more1
// component: () => import('../views/More1View.vue'),
redirect:{name:'More1'}
},
{
path: 'more1',
name: 'More1',
component: () => import('../views/More1View.vue')
},{
path: 'more2',
name: 'More2',
component:More2View
},{
path: 'more3',
name: 'More3',
component:More3View
},
]
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
AboutView.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<input type="button" value="click" @click="doClick">
</div>
</template>
<script setup>
import {useRouter} from 'vue-router'
const router = useRouter()
const doClick = ()=>{
router.push({name:'Detail',params:{id:2},query:{page:1,pageSize:12}})
// router.push({name:'Home'})
// router.push({path:'/Home'})
// router.replace() 与push功能一样，比push少个池子
}
</script>
导航守卫
router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import More2View from "@/views/More2View";
import More3View from "@/views/More3View";
import LoginView from "@/views/LoginView";
const routes = [
{
path: '/login',
name: 'Login',
component: LoginView
},
{
path: '/',
name: 'Home',
component: HomeView,
children: [{
path: '/about',
name: 'About',
component: () => import('../views/AboutView.vue')
},{
path: '/new',
name: 'New',
component: () => import('../views/NewView.vue')
},{
path: '/course',
name: 'Course',
component: () => import('../views/CourseView.vue')
},{
//添加url params
path: '/detail/:id',
name: 'Detail',
component: () => import('../views/DetailView.vue')
},{
path: '/more',
name: 'More',
component: () => import('../views/MoreView.vue'),
children:[
{
path: '',
// 访问more 自动显示more1
// component: () => import('../views/More1View.vue'),
redirect:{name:'More1'}
},
{
path: 'more1',
name: 'More1',
component: () => import('../views/More1View.vue')
},{
path: 'more2',
name: 'More2',
component:More2View
},{
path: 'more3',
name: 'More3',
component:More3View
},
]
}]
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
router.beforeEach((to,from,next)=>{
// to，即将访问路由对象
// from，当前正要离开路由
// next() 继续向后执行，去to的页面
// next(false) 不跳转，还在当前页面。
// next("/xxx") next({name:"xxx"}) next({pat:"/xxx"})
let token = sessionStorage.getItem('isLogin')
if(token){
// 已登录，可以向目标地址访问
next()
return
}
// 未登录，登录页面
if(to.name=='Login'){
next();
return;
}
// 未登录，访问的其他地址
next({name:"Login"})
})
export default router
