【router基本使用（路由跳转,携带数据）】
####### 跳转 #######
-js跳转
this.$router.push(路径)
this.$router.push(对象)
-this.$router.push({name:'路由别名'})
-this.$router.push({path:'路径'})
-组件跳转
<router-link to="/about">
<router-link :to="{name:'路由别名'}">
<router-link :to="{path:'路径'}">
##### 路由跳转，携带数据############
-请求地址中以 ? 形式携带 ---》 /about?name=数据
#####router-link######
-router-link 组件携带
- to="/about?name=xxx"
- :to="{name:'about',query:{name:'xxx',age:18}}"
-在另一个页面组件中取：
this.$route.query
#####js跳转######
-js跳转 携带数据
-this.$router.push('/about?name=xxx&age=18')
-this.$router.push({name: 'about', query: {name: 'xxx', age: 28}})
-在另一个页面组件中取：
this.$route.query
1 <template>
2 <div class="home">
3 <h1>Home</h1>
4 <!-- <<h></h>outer-link to="/about?name=xxx"><button>跳转到about</button></router-link>-->
5 <!-- 请求地址中以 ？形式携带-->
6 <!--<router-link :to="{name:'about',query:{name:'xxx',age:18}}"><button>跳转到about</button></router-link>-->
7 <hr>
8 <button @click="handleTo">js跳转到about</button>
9 </div>
10
11 </template>
12
13 <script>
14
15 export default {
16 name: 'HomeView',
17 methods: {
18 handleTo() {
19 //1.js携带数据
20 // this.$router.push('/about?name=xxx&age=18')
21
22 //2.js携带数据
23 this.$router.push({name: 'about', query: {name: 'xxx', age: 28}})
24 }
25 }
26 }
27 </script>
aboutView
<template>
<div class="about">
<h1>about页面</h1>
</div>
</template>
<script>
export default {
name: 'AboutView',
data() {
return {
name: '',
}
},
created() {
console.log('$route', this.$route) //$route是当前路由信息对象
//取值
this.name = this.$route.query.name
}
}
</script>
----------------------------------------------------------------------------
-请求地址中携带 --》/about/数据/
-必须在路由中写
{
path: '/about/:id/detail',
name: 'about',
component: AboutView
},
-标签跳转
-to="/about/88"
-:to="{name:'about',params:{id:66}}"
-js跳转
this.$router.push('/about/tt')
this.$router.push({name: 'about', params: {id: 'xxx'}})
-另一组件中取
this.$route.params
。
。
。
【相关api】
1 指的是：this.$router--->方法
2 常用的 this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$router.go(-1): 请求(返回)上一个记录路由
this.$router.go(1): 请求下一个记录路由
【多级路由】
1 <template>
2 <div class="home">
3
4 <div class="left">
5 <router-link to="/backend/index"><p>首页</p></router-link>
6 <router-link to="/backend/order"><p>订单页面</p></router-link>
7 <router-link to="/backend/goods"><p>商品页面</p></router-link>
8
9 </div>
10 <div class="right">
11 <router-view></router-view>
12 </div>
13 </div>
14
15 </template>
16
17 <script>
18
19 export default {
20 name: 'HomeView',
21 methods: {
22
23 },
24
25 }
26 </script>
27
28 <style scoped>
29 .home{
30 display: flex;
31 }
32 .left{
33 height: 300px;
34 width: 20%;
35 background-color: #42b983;
36 }
37 .right{
38 height: 300px;
39 width: 80%;
40 background-color: aqua;
41 }
42 </style>
。
。
【路由守卫】
。
。