路由的基本使用
1.引入js文件,放在vue.js后面
2.创建路由对象
const router = new VueRouter
3.创建映射关系
routes
4.将路由挂载到vue实例上
router: router
5.预留展示区
<router-view></router-view>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.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
<router-link :to="{path:'/detail',query:{courseid:111} }">跳转到详情页</router-link> <!-- path方法 -->
<router-link :to="{path:'/detail/son',query:{courseid:111} }">跳转到详情页的儿子</router-link> <!-- son会出来 -->
<router-link :to="{name:'my',params:{userid:222} }">跳转到我的页</router-link> <!-- name方法 -->
<button @click="toplay">跳转到play</button> <!-- 函数的path方法 -->
<button @click="toplay2">my</button> <!-- 函数的name方法 -->
</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>
son11121
</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: { //通过router-view中的name属性将它放在视图层上
default:index,
mine
}
/* children: {
// {
// }
[
path: 'son',
component: son
]
} */
},
{
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>