文章目录
在vue1.0版本的超链接标签还是原来的a标签，链接地址由v-link属性控制
而vue2.0版本里超链接标签由a标签被替换成了router-link标签，但最终在页面还是会被渲染成a标签的
至于为什么要把a换成router-link原因还是有的，比如我们之前一直惯用的nav导航里面结构是（ul>li>a），router-link可以渲染为任何元素，这里可以直接渲染成li标签，同样能实现跳转效果，节省了a标签的使用，还有一个原因可能是因为a标签正常是链接的跳转的作用，点击a时可能会重载页面，使用router-link，此标签会被vue所监听，跳转链接时就不会刷新页面了。当然这个人理解，不对之处有望指正。
"router-link"属性
1.":to" 属 性
相当于a标签中的"herf"属性，后面跟跳转链接所用<router-link :to="/home">Home</router-link>
渲染结果<a href="/home">Home</a>
2.“replace” 属 性
replace在routre-link标签中添加后，页面切换时不会留下历史记录<router-link :to="/home" replace></router-link>
3.“tag” 属 性
具有tag属性的router-link会被渲染成相应的标签<router-link :to="/home" tag="li">Home</router-link>
渲染结果<li>Home</li>
此时页面的li同样会起到a链接跳转的结果，vue会自动为其绑定点击事件，并跳转页面
4.“active-class” 属 性
这个属性是设置激活链接时class属性也就是当前页面所有与当前地址所匹配的的链接都会被添加class属性<router-link :to="/home" active-class="u-link--Active">Home</router-link>
active-class属性的默认值是router-link-active,所以如果没有设置，就会被渲染为这个class
可以在router.js里面设置
const router = new VueRouter({
mode: 'hash',
linkActiveClass: 'u-link--Active', // 这是链接激活时的class
})
5.“exact” 属 性
开启router-link的严格模式<router-link :to="/" exact>home</router-link>
上面这个标签如果不加exact属性，则会在vue2.leenty.com/article页面下也会被匹配到，
这却不是我们的本意,在加了这个属性后就会正确的匹配到vue2.leenty.com下
嵌套路由实现左边选择右边刷新：
左边菜单栏使用：router-link 标签，右边使用 router-view 嵌套，实现路由；
router-link 传参方式：
其中name 需要和 router.js 中路由对应，传入不同的 type 以区分不同的tab页面；
实现步骤：
1.app 的主路由中 这个步骤一成不变;
2.在想要实现同页面的嵌套路由的page中；再一次定义一个 router-view 标签，如下：
①：需要跳转的 router-link :
<el-menu-item-group>
<el-menu-item index="1-1">
<router-link :to="{name: 'firstPage', params:{type:'1'}}">选项一
</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link :to="{name: 'firstPage', params:{type:'2'}}">选项二
</router-link>
</el-menu-item>
</el-menu-item-group>
复制代码
②：嵌套的 router-view：
<el-main>
<router-view></router-view>
</el-main>
复制代码
③：router.js 中的配置：
routes: [
{
path: '/',
name: 'mainPage',
component: MainPage
},
{
path: '/page',
name: 'mainPage',
component: MainPage,
children: [
{
path: '/page/:type',
name: 'firstPage',
component: FirstPage
}
]
}
]
其中需要一个根路由，再在根路由的路径下写子路由路径！注意 path 下面的路径配置；其中，type 的值使我们在 router-link 中传递过来的；在子组件的 firstPage 中我们可以使用 watch 来监听url 上面的 params 变化；具体如下：
④：在 firstPage 中的 watch 函数监听 route 变化
watch: {
'$route' (to, form) {
if (this.$route.params.type === '1') {
this.Msg = '这是第一页'
} else if (this.$route.params.type === '2') {
this.Msg = '开心,这是第二页'
}
}
}
在这个地方执行该页面相应的操作即可；
注意事项：
1.keep-alive 标签的用法：
<keep-alive>
<router-view></router-view>
</keep-alive>
配合 router-view 缓存整个路由页面
2.路由中可以使用 children 当作路由的嵌套；
{
path: '/app',
name:'app',
redirect:'/app/main',
component: resolve => import('./app'),
children:[
{
path: '/app/main',
name:'main',
component: resolve => import('./view/mainPage'),
｝
]
}
3.路由中component中 resolve 的用法：
onent: resolve => import(’./view/mainPage’)
实现路由的懒加载；
this.$route和this.$router的区别
this.$route是this.router的一部分
this.$route指的是当前被激活的路由信息
this.$router指的就是router文件夹里面的index.js抛出的内容
也就是以下的内容
export default new Router({
routes: [
{
path: '/',
name: 'Button',
component: Button
},
{
path: '/button',
component: Button,
children: [
{
path: '/button/button1',
name: 'Button1',
component: Button1
},
{
path: '/button/button2',
name: 'Button2',
component: Button2
}
]
},
{
path: '/layout',
name: 'Layout',
component: Layout
}
],
mode: 'history'
})
而this.$route指的是其中某一个被激活的路由
如果当前的路径是这样http://localhost:8081/button/button2?name=dx&age=18
那this.$route指的就是这一个路径 ,在组件内显示当前组件路由后面的部分,可以在当前路由中使用 this.$route
<template>
<div>
<h2>{{userId}}</h2>
</div>
</template>
<script>
export default {
computed:{
userId(){
return this.$route.params.userId
}
}
}
</script>
{
path:'/user/:userId'
component:user
}
传递参数的方式
params传递简单值 , query传递对象,有大量数据用query
通过:to跳转
<!-- <router-link :to="/profile">档案</router-link> -->
<router-link :to="path:'/profile',query:{name:'wushen',age:18,height:180">点击跳转Profile组件</router-link>
<template>
<div>
<h2>我是Profile组件</h2>
<h2>{{$route.query.name}}</h2>
<h2>{{$route.query.age}}</h2>
<h2>{{$route.query.height}}</h2>
</div>
</template>
通过代码跳转
<template>
<div>
<button @click='userClick'>用户</button>
<button @click='profileClick'>档案</button>
</div>
</template>
<script>
export default{
data(){
return {
userId:'wushen'
}
},
methods:{
userClick(){
this.$route.push('/user/'+this.userId)
},
profileClick(){
this.$route.push({
path: '/profile',
query: {
name: 'wushen',
age:18,
height:1.88
}
})
}
}
}
</script>
this.$route.query和this.$route.params的使用与区别
params相对应的是name , query相对应的是path
一、this.$route.query的使用
1、router/index.js
{
path:'/mtindex',
component: mtindex,
//添加路由
children:[
{
path:':shopid',
component:guessdetail
}
]
},
2、传参数
this.$router.push({
path: '/mtindex/detail', query:{shopid: item.id}
});
3、获取参数
this.$route.query.shopid
4、url的表现形式(url中带有参数)
http://localhost:8080/#/mtindex/detail?shopid=1
二、this.$route.params
1、router/index.js
{
path:'/mtindex',
component: mtindex,
//添加路由
children:[
{
path:"/detail",
name:'detail',
component:guessdetail
}
]
},
2、传参数（ params相对应的是name query相对应的是path）
this.$router.push({
name: 'detail', params:{shopid: item.id}
});
3、获取参数
this.$route.params.shopid
4、url的表现形式(url中没带参数)
http://localhost:8080/#/mtindex
this.$router.push传递参数
this.$router.push传递参数有2种方式：
传递参数 – this.$router.push({path: ’ 路由 ', query: {key: value}})
参数取值 – this.$route.query.key
使用这种方式，传递参数会拼接在路由后面，出现在地址栏.
传递参数 – this.$router.push({name: ’ 路由的name ', params: {key: value}})
参数取值 – this.$route.params.key
使用这种方式，参数不会拼接在路由后面，地址栏上看不到参数…
动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。
[通过路由配置的name属性访问].