1.引入js文件,放在vue.js后面
2.创建路由对象 const router = new VueRouter
3.创建映射关系 routes
4.将路由挂载到vue实例上 router: router
5.预留展示区
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
<style>
.active {
font-size: 40px;
color: hotpink;
}
</style>
</head>
<!-- 1.引入js文件,放在vue.js后面 -->
<body>
<div id='app'>
<!-- 5.预留展示区 -->
<router-view></router-view>
<router-view name="mine"></router-view>
</div>
<template id="index">
<div>
index
<!-- path方法 -->
<router-link :to="{path:'/detail',query:{courseid:111} }">跳转到详情页</router-link>
<router-link :to="{path:'/detail/son',query:{courseid:111} }">跳转到详情页的儿子</router-link>
<!-- name方法 -->
<router-link :to="{name:'my',params:{userid:222} }">跳转到我的页</router-link>
<!-- 函数的path方法 -->
<button @click="toplay">跳转到play</button>
<!-- 函数的name方法 -->
<button @click="toplay2">my</button>
</div>
</template>
<template id="detail">
<div>
detail
<router-view></router-view>
</div>
</template>
<template id="mine">
<div>
mine
</div>
</template>
<template id="play">
<div>
play
</div>
</template>
<template id="son">
<div>
son
</div>
</template>
<script>
let play = {
template: '#play'
}
let son = {
template: '#son'
}
let mine = {
template: '#mine',
}
let index = {
template: '#index',
methods: {
toplay() {
this.$router.push({
path: "/play",
query: {
course: 444
}
})
},
toplay2() {
this.$router.push({
name: 'my',
params: {
userid: 888
}
})
}
}
}
let detail = {
template: '#detail',
created() {
console.log(this.$route.query.courseid);
}
}
//2.创建路由对象
const router = new VueRouter({
//3.创建映射关系
routes: [
//路由重定向
{
path: '/',
redirect: '/index'
},
{
path: '/index',
// component: index,
components: {
default:index,
mine
}
},
{
path: '/detail',
component: detail,
children: [
{
path: 'son',
component: son,
}
]
},
{
path: '/play',
component: play
},
{
path: '/mine/:userid',
component: mine,
name: 'my'
},
],
//自定义路由高亮
linkActiveClass: 'active'
})
const vm = new Vue({
//4.将路由挂载到vue实例上
router: router,
el: '#app',
data: {
},
methods: {
}
})
</script>
</body>
</html>