目录
步骤1：路由配置清单，创建一个router实例（/router/index.js）
vue-路由-router.go/forward()/back()
路由模式
hash模式
history: createWebHashHistory()
路由带#（哈希字符），改变url不会去请求服务器，性能高
HTML5模式
history: createWebHistory()
前端的url和后端发起请求的url不一致的话，会报404错误，所以使用history模式的话我们需要和后端进行配合
vue-路由创建
步骤1：路由配置清单，创建一个router实例（/router/index.js）
安装npm install vue-router@4
import { createRouter, createWebHashHistory } from 'vue-router'
import about from '../components/about.vue'
import good from '../components/good.vue'
//路由配置清单
const constRoutes = [
{ path : '/about', component: about },
{ path : '/good/:id', name:'/good/任意路由', component: good },
{ path : '/any/:id(\\d+)', name:'/any/任意数据路由', component: () => import('../components/anyNumber.vue')},
{ path : '/:path(.*)', name:'404路由', component: () => import('../components/404.vue')},
]
//创建一个router实例
const router = createRouter({
history: createWebHashHistory(),
routes: constRoutes
})
export default router步骤2：router-link/router-view
<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的<a>标签
使用<router-view/>确定路由组件渲染的位置
（/src/App.vue）
<template>
<div>
<p>路由导航</p>
<p>
<router-link to="/about">about</router-link>
<br/>
<router-link to="/good/123">link-good</router-link>
<br/>
<router-link to=".pathMatch(.*)">link-good</router-link>
</p>
<!--路由对应的组件展示位置-->
<router-view/>
</div>
</template>
步骤3：router实例注入Vue根组件实例中
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
/**
* createApp 创建app应用，其中App为根主件，也就是渲染的起点
* mount挂在<div id="app"></div>，与Dom进行双向绑定，当App的主件实例对象数据发生改变，Dom页面也跟着改变
* 注意： 如果使用v-once（一次性渲染）只能进行一次插入，不会随主件实例对象数据发生改变
*
* router实例注入到Vue根组件实例中，router需要在挂载mount浅use
*/
const app = createApp(App).use(router).mount('#app')测试结果
输入链接：http://127.0.0.1:5173/#/about
输入链接：http://127.0.0.1:5173/#/good/123
输入链接：http://127.0.0.1:5173/#/good
js跳转页面
步骤1：路由配置
参考（/router/index.js） vue-路由_知识的行走者的博客-CSDN博客
步骤2：this.$router.push
(/App.vue)
<script>
export default{
methods:{
changeRuote(type){
if(type===1)
//带问号参数
this.$router.push({path: '/about', query: {name: '李四'}})
else{
this.$router.push('/about')
}
// 路径参数
// this.$router.push({path: '/about', param: {id: 123}})
}
}
}
</script>
<template>
<div>
<button @click="changeRuote">name=张三</button>
</div>
<div>
<button @click="changeRuote(type=1)">name=李四</button>
</div>
<router-view/>
</template>
步骤3：about组件
(/about.vue)
this.$route //可获取当前页面路由信息
this.$router //全局路由
<template>
<h1>about</h1>
</template>
<script>
export default{
mounted(){
//当前页面url的？后面的参数name是否有值
if(this.$route.query.name){
console.log(this.$route.query.name)
}else{
console.log("无值")
}
}
}
</script>效果
点击按钮“name=张三”，页面链接：http://127.0.0.1:5173/#/about
console.log 输出：无值
点击 按钮“name=李四”，页面链接：http://127.0.0.1:5173/#/about?name=%E6%9D%8E%E5%9B%9B
console.log 输出：李四
vue-路由-router.go/forward()/back()
1、替换当前位置，不向history添加新的记录
this.$router.push({path:'/about', replace:'true'})
或 this.$router.replace({path: '/about'})
2、前进后退多少个记录，在历史堆栈中前进或后退多少步
this.$router.go(1) // 前进一个记录 与this.$router.forward()相同
this.$router.go(-1) // 后退一个也记录，与this.$router.back()相同
命名视图
达到效果：访问一个链接，一个页面展示多个同级组件。
// router.inedx.js
import { createRouter, createWebHashHistory } from 'vue-router'
import top from '../view/top.vue'
import main from '../view/main.vue'
import footer from '../view/footer.vue'
const constRoutes = [
{
path : '/page',
components: { // 注意components ，有个s
default: main,
top, //等价于 top:top
footer
}
}
]
const router = createRouter({
history: createWebHashHistory(),
routes: constRoutes
})
export default router// 文件view/top.vue
<template>
<h3>top 视图PAGE</h3>
</template>
// 文件view/main.vue
<template>
<h3>main 视图PAGE</h3>
</template>
// 文件view/footer.vue
<template>
<h3>footer 视图PAGE</h3>
</template>访问链接：http://127.0.0.1:5173/#/page
重定向
const constRoutes = [
{
path: '/page1',
//重定向
redirect: "/page"
},
{
path: '/page2',
//重定向:通过name
redirect: {name: 'mainpage'}
},
{
path: '/page3',
//重定向:方法,to包含了当前路由的相关信息
redirect: (to)=>{
console.log(to)
return {name: 'mainpage'}
}
},
{
path : '/page',
name : 'mainpage',
component:()=> import('../view/top.vue'),
},
]
别名
const constRoutes = [
{
path: '/top',
alias: '/top1',//别名
component:()=> import('../view/top.vue'),
},
{
path : '/page',
alias : ['/page1','/page2','/page3'],//数组别名
component:()=> import('../view/main.vue'),
}
]通过props进行路由组件传参数
const constRoutes = [
{
path: '/top/:id',
component:()=> import('../view/top.vue'),
props: true
}
]方式一：
<template>
<h3>top 视图PAGE</h3>
</template>
<script>
export default{
props:['id'],
mounted(){
console.log(this.id)
}
}
</script>方式二：组合式
<template>
<h3>top 视图PAGE</h3>
</template>
<script setup>
const props = defineProps({
id:String
})
console.log(props.id)
</script>对于命名视图，需要为每个命名的视图制定props值，如下
const constRoutes = [
{
path: '/top/:id',
components:{
default:main,
top,
footer
},
props:{default:ture ,top:false, footer:true }
}
]
路由守卫
全局守卫
// promiss.js
import router from './router/index'
/**
* 全局守卫
* from :来的路由
* to：要去的路由
* next() 通行证
*/
router.beforeEach((to,from,next)=>{
// 可以根据to,from的信息做一些判断
//通行证
next()
})
每路守卫
const constRoutes = [
{
path: '/top/:id',
component: top,
beforeEnter:(to, from, next)=>{
console.log("beforeEnter.....")
next()
}
}
]组件内守卫
// ./view/top.vue
<template>
<h3>top 视图PAGE</h3>
</template>
<script>
export default{
data(){
return{
age:18
}
},
beforeRouteEnter(to, from, next){
// 进去前执行
console.log("组件守卫：beforeRouteEnter。。。")
next((vm)=>{
console.log(vm.age)//vm相当于this
})
},
beforeRouteUpdate(to, from, next){
// 路由更新执行，例如有/top/1 变为top/2
console.log("组件守卫：beforeRouteUpdate。。。")
next()
},
beforeRouteLeave(to, from, next){
// 离开该路由执行
console.log("组件守卫：beforeRouteLeave。。。")
next()
}
}
</script>结果：
输入： http://127.0.0.1:5173/#/top/1
接上面输入 ：http://127.0.0.1:5173/#/top/2
接上面，输入：http://127.0.0.1:5173/#/top
扫一扫
617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
