Vue路由 router-编程式 leve3
先点击一下搜索 然后再点击一下‘跳转到second即可看到效果’ 话不多说咱们直接上代码,老规矩你想知道的我都在注释中标明了,聪明的你肯定一看就懂!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/node_modules/vue/dist/vue.js"></script>
<script src="/node_modules/vue-router/dist/vue-router.js"></script>
<style>
.active{
font-weight: 600;
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<router-link tag="li" to="/position" active-class="active">一级菜单1</router-link>
<router-link tag="li" to="/search" active-class="active">一级菜单2</router-link>
</ul>
<router-view></router-view>
<!-- 定义一个方法 -->
<button @click="goLink">跳转到second</button>
</div>
<script>
const position = {
template:`
<div>
<router-link to="/position/first" active-class="active">二级菜单1</router-link>
<router-link to="/position/second" active-class="active">二级菜单2</router-link>
<router-view></router-view>
</div>
`
}
const search = {
template:`
<div>search</div>
`
}
/* 这里配置我们的路由 */
let router = new VueRouter({
// mode:'hash',默认值
//路由匹配一般会按顺序从上往下匹配
routes:[
{//这里也可以配置一下
path:'/',
redirect:'/position/second',
},
{
path:'/position',
component:position,
redirect:'/position/second',
children:[
{
path:'/position/first',
component:{
template:'<div>first</div>'
}
},
{
path:'/position/second',
name:'secondcc',//命名式路由 这个name用作标识 可以随便起
component:{
template:'<div>second</div>'
}
},
]
},
{
path:'/search',
component:search
},
{
path:'*',//匹配一个404页,就是上面路由均匹配不到时
component:{
template:`
<h1>404 page not found!</h1>
`
}
}
]
})
let vm = new Vue({
router,
el:'#app',
methods:{
goLink(){
// this.$router.push('/position/second')
// this.$router.push({
// path:"/position/second"
// })
//命名式路由
// this.$router.push({
// name:"secondcc"
// })
//也可以这么写
router.push({
name:"secondcc"
})
}
}
})
</script>
</body>
</html>