选中路由高亮
<style>
/* 默认选中路由高亮 */
/* 直接添加该样式即可 */
/* 点击过的跳转会变为该样式 */
.router-link-active {
color: pink;
}
/* 自定义选中路由高亮 */
.myactive {
color: gold;
}
</style>
<body>
<div id='app'>
<router-view></router-view>
<router-link :to="gomy">走一个</router-link>
</div>
<template id="isdetail">
<div>
<p>首页</p>
</div>
</template>
<template id="ismy">
<p>个人页面</p>
</template>
</body>
<script>
let index = {
template: '#isdetail',
}
let my = {
template: '#ismy'
}
const myRoute = new VueRouter({
routes: [
{
path: '/',
redirect: '/index'
},
{
path: '/index',
component: index
},
{
name: '/my',
path: '/my/id=120',
component: my
}
],
// 在此自定义路由高亮的样式名称,用linkActiveClass属性
linkActiveClass: "myactive"
})
const vm = new Vue({
router: myRoute,
el: '#app',
data: {
gomy: {
name: '/my',
params: 'id=120'
}
},
methods: {
}
})
</script>
结果如下:
主页
个人页面
路由组件的嵌套
<body>
<div id='app'>
<router-view></router-view>
</div>
<template id="myindex">
<div>
<p>首页</p>
<router-link :to='indexOk'>出来吧详情页!!!!!!</router-link>
<router-view></router-view>
</div>
</template>
<template id="mydetail">
<div>
<p>详情页</p>
</div>
</template>
</body>
<script>
let index = {
template: '#myindex',
data() {
return {
indexOk: {
path: '/index/detail'
},
}
}
}
let detail = {
template: '#mydetail'
}
const myRoute = new VueRouter({
routes: [
{
path: '/',
redirect: '/index',
},
{
path: '/index',
component: index,
children: [
{
path: 'detail',
component: detail
}
]
},
]
})
const vm = new Vue({
router: myRoute,
el: '#app',
data: {
},
methods: {
}
})
</script>
结果如下:
主页
详情页
命名视图
<body>
<div id='app'>
<router-view></router-view>
<router-view name="detail"></router-view>
</div>
<template id="myindex">
<div>
<p>首页</p>
</div>
</template>
<template id="mydetail">
<div>
<p>详情页</p>
</div>
</template>
</body>
<script>
let index = {
template: '#myindex',
data() {
return {
indexOk: {
path: '/index/detail'
},
}
}
}
let detail = {
template: '#mydetail'
}
const myRoute = new VueRouter({
routes: [
{
path: '/',
redirect: '/index',
},
{
path: '/index',
// 如果碰到了命名视图,,将会在components里寻找除了default之外的名字,如果找到了匹配的名字,就会渲染该名字对应的路由组件
components: {
// 默认路由,当遇到<router-view>时,当前页面的路由是谁,就渲染谁的路由组件
default: index,
detail
}
},
{
path: '/detail',
components: {
default: detail,
index
}
}
]
})
const vm = new Vue({
router: myRoute,
el: '#app',
data: {
},
methods: {
}
})
</script>
结果如下