<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="" name="Keywords">
<meta content="" name="description"/>
<title></title>
<link rel="icon" href="">
<style>
.router-link-active{
color: #ee2ad6;
}
</style>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<!-- router-link 标签上的tag 是修改展示的标签元素的 不写的话默认 a标签
active-class 是控制当前选中状态的类名的，后边跟的值就是选中状态下的类名
不写这个属性，默认选中的类名就是 router-link-active
exact-active-class 精确（会把传的一些参数认成不同路径）匹配 路由
不写这个属性，默认选中的类名就是 router-link-exact-active
-->
<!-- <router-link to="/home" tag="button" active-class="current">首页</router-link>
<router-link to="/list" tag="button" exact-active-class="exactClass">列表页</router-link>-->
<!--query 这个单词是vue-router 规定的；
后边跟的是个对象，router会把对象中的每一项拼接到路由后边-->
<router-link :to="{path:'/home',query:{name:12,age:13}}">首页</router-link>
<!--params 这个单词也是vue-router规定的，它是对象中的参数当做路拼到之前的路径上
这个地方不能再用path跳转 必须用name跳转-->
<router-link :to="{name:'q',params:{name:12}}"> 列表页</router-link>
<router-view></router-view>
</div>
</body>
</html>
<script src="node/node_modules/vue/dist/vue.js"></script>
<script src="node/node_modules/vue-router/dist/vue-router.js"></script>
<script>
let home = {
template:"<h2>首页</h2>",
mounted(){
console.log(this.$route.query); //通过$route 可以获取路径上的参数
console.log(this);
}
};
let list = {
template:"<h2>列表页</h2>",
mounted(){
console.log(this.$route.params);
console.log(this);
}
};
const routes=[
{
path:'/home',
component:home
},
{
path:'/list/:name', //若想要路径传参，则需要在路径参数对应的位置写成:变量的形式
//这个变量会对应上 在行内设置的params对象中的属性名对应的属性值
name:'q', //若想用路径传参，则必须用name去指定跳转路径
component:list
}
];
const router=new VueRouter({
routes,
// mode:'history'
linkActiveClass:'current2' , //这个是给全局的选中状态下的 router-link修改类名
linkExactActiveClass:'activeClass'
});
let vm = new Vue({
el: '#app',
data: {},
router,
created(){
},
directives: {},
methods: {},
computed: {},
watch: {},
filters: {}
})
</script>