Vue-路由(vue-roter)
1.路由的使用
1.路由的安装vue-router
npm i vue-router@3
vue3中使用router4版本，vue2中使用router3版本
2.应用路由插件
① 在src目录下创建router文件夹作为路由文件夹
② 在router文件夹下创建index.js 文件（该文件用于创建整个应用的路由器）
③ 编写index.js
import VueRouter from 'vue-router' //路由插件的引入
//pages一般储存路由组件Son1.vue,Son2.vue
import Son1 from '../pages/Son1' //引入组件
import Son2 from '../pages/Son2' //引入组件
//创建一个路由器
const router = new VueRouter({
routers:[
{
//此时项目集中已经提供 Son1.vue Son2.vue
path:'/son1', //path 为路径
component: Son1, //组件名
}
{
path:'/son2', //path 为路径
component: Son2, //组件名
}
]
})
④ 在main.js中引入路由插件并使用
import VueRouter from 'vue-router' //路由插件的引入
Vue.use(VueRouter) //路由插件的使用
import router from './router' //引入创建的router文件夹下的index.js
new Vue({
el:"#app",
render: h=> h("App"),
router,//此时vue中多了一个$router
})
⑤点击父组件中的链接，分别显示路由Son1和Son2
<template>
<div>
<div class="路由按钮">
<!-- // 跳转时用 router-link 标签 -->
<router-link to="/son1"> Son1 </router-link>
<!-- // go展示哪一个路由 -->
<router-link to="/son2"> Son2 </router-link>
</div>
<div class="路由展示区">
<!-- //指定路由展示位置 -->
<router-view> </router-view>
</div>
<div>
<!-- //当路由从Son1跳转到Son2时Son1组件被销毁，Son2组件加载-->
</template>
3.多级路由
要求：在一级路由Son2的基础上二级路由展示SonSon.vue组件。
① 在router文件夹下创建index.js 文件添加下属内容
import SonSon from '../pages/SonSon' //引入组件SonSon.vue
const router = new VueRouter({
routers:[
{
path:'/son2', //path 为路径
component: Son2, //组件名
//children 添加孩子路由的配置项
children:[
{
name:'SonSon',
path:'sonson',//多级路由，此时路径不用写/
component: SonSon,
}
]
}
]
})
② Son2.vue组件内容
<template>
<div>
<router-link to="/son2/sonson"> 点击我路由展示SonSon.vue组件 </router-link>
<router-view></router-view>
</div>
</template>
4 路由传递参数
4.1 query传参
要求:用query传参，将路由Son2中的numData中的一些数据传给子路由SonSon组件SonSon.vue
<template>
<div>
<!-- to 的字符串写法 -->
<router-link :to="/son2/sonson?name=${numData.name}&age=${numData.age}">
点击我路由展示SonSon.vue组件
</router-link>
<!-- to 的对象写法 -->
<router-link :to="{
path:'/son2/sonson',
query:{
name:numData.name,
age:numData.age,
}
}"> <!-- path:'/son2/sonson', 可以用 name:'SonSon'-->
点击我路由展示SonSon.vue组件
</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default{
name:'Son2',
data(){
return{
numData:{
name:'小何',
age:'22',
sex:'男'
}
},
},
}
</script>
<template>
<div>
<!-- $route表示当前路由，$router表示全部路由 -->
姓名：{{$route.query.name}}
年龄：{{$route.query.age}}
</div>
</template>
4.2params传参
要求:用params传参，将路由Son2中的numData中的一些数据传给子路由SonSon组件
import SonSon from '../pages/SonSon' //引入组件SonSon.vue
const router = new VueRouter({
routers:[
{
path:'/son2', //path 为路径
component: Son2, //组件名
//children 添加孩子路由的配置项
children:[
{
name:'SonSon',
path:'sonson/:name/:age',//此时/:name/:age'为params传参的参数的占位符
component: SonSon,
}
]
}
]
})
<template>
<div>
<!-- to 的字符串写法 -->
<router-link :to="/son2/sonson/${numData.name}/${numData.age}">
点击我路由展示SonSon.vue组件
</router-link>
<!-- to 的对象写法 -->
<router-link :to="{
name:'SonSon'，
params:{
name:numData.name,
age:numData.age,
}
}"> <!-- params 传参，to的对象写法必须用 name:'SonSon'-->
点击我路由展示SonSon.vue组件
</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default{
name:'Son2',
data(){
return{
numData:{
name:'小何',
age:'22',
sex:'男'
}
},
},
}
</script>
<template>
<div>
<!-- $route表示当前路由，$router表示全部路由 -->
姓名：{{$route.params.name}}
年龄：{{$route.params.age}}
</div>
</template>
4.3props传参
5.的replace属性
① 作用：控制路由跳转时操控浏览器的历史记录
② 浏览器的历史纪录有两种写入方式 1.push 2.replace，push是追加历史记录，replace是替换历史记录。路由跳转默认为push
③ 开启replace模式
- 编程式路由导航
要求：不用router-link 实现路由的跳转
<template>
<div>
<button @click='showsonson'>点击我路由展示SonSon.vue路由组件</button>
<router-view></router-view>
</div>
</template>
<script>
export default{
name:'Son2',
data(){
return{
numData:{
name:'小何',
age:'22',
sex:'男'
}
},
},
methods:{
showsonson(){
this.$rouyer.path({
name:'SonSon'，
params:{
name:numData.name,
age:numData.age,
}
}),
this.$rouyer.replace({
name:'SonSon'，
params:{
name:numData.name,
age:numData.age,
}
}),
this.$router.back(),//当前路由历史记录前进1
this.$router.forward(),//当前路由历史记录后退1
this.$router.go(2)//表示历史往前2步，负数表示后退几步
}
}
}
</script>
6.缓存路由组件
//想要路由不销毁需要给
// include 指定不需要销毁的路由组件 参数为组件名
//
//
//
浙公网安备 33010602011771号