断断续续在看后盾网的视频学vue，平时喜欢写在本子上，但是找起来真特别不方便，所以打算以后慢慢都写在这里。只是自己写的学习笔记，很多地方只是个人见解，不对的地方欢迎大家指正。
1.先引入vue.js和vue-router.js（在官网下载）
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
2.定义两个组件，tem1和tem2，然后把它们交给路由
<script type="text/x-template" id="tem1">
<div>
<h1>hello template1</h1>
</div>
</script>
<script type="text/javascript">
const tem1={
template:"#tem1"
}
}
const tem2={
template:"<h2>hello template2</h2>"
}
let router=new VueRouter({//路由
routes:[//path里是路径，对应写在router-link的to里，component是路径所对应展示的组件
{path:'/tem1',component:tem1},
{path:'/tem2',component:tem2},
]
})
new Vue({
el:'#app1',
data:{
},
router//相当于router:router,将路由引入到#app1里
})
</script>
<div id="app1">
<!-- router-link标签就相当于a标签，to就相当于href属性-->
<router-link to="/tem1">tem1</router-link>
<router-link to="/tem2">tem2</router-link>
<!-- 组件的内容会渲染到router-view标签里-->
<router-view></router-view>
</div>
结果：
image.png
点击tem1会展示组件tem1的内容，点击tem2会展示tem2的内容。
3.给vue-router配置参数
//给上面的路由配置加上参数id和cid（:后面的是参数名称,qqq前面不带:，所以它是常量）
let router=new VueRouter({
routes:[
{path:'/tem1/:id/qqq/:cid',component:tem1},
{path:'/tem2',component:tem2},
]
})
获取参数：
//html获取:{{$route.params}},
js获取:this.$route.params
在组件htm1加上参数：
<script type="text/x-template" id="tem1">
<div>
<h1>hello template1</h1>
{{$route.params.id}}
<br/>
<button type="button" @click="show">检测参数</button>
</div>
</script>
const tem1={
template:"#tem1",
methods:{
show:function(){//注意这个函数是子组件的，不能写在根组件下
console.log(this.$route.params)//打印参数
}
}
}
在地址栏参数位置对应输入常量，执行结果：
image.png
完整的html部分：
<div id="app1">
<router-link to="/tem1">tem1</router-link>
<router-link to="/tem2">tem2</router-link>
<router-view></router-view>
</div>
完整的js部分：
<script type="text/x-template" id="tem1">
<div>
<h1>hello template1</h1>
{{$route.params.id}}
<br/>
<button type="button" @click="show">检测参数</button>
</div>
</script>
<script type="text/javascript">
const tem1={
template:"#tem1",
methods:{
show:function(){
console.log(this.$route.params)
}
}
}
const tem2={
template:"<h2>hello template2</h2>"
}
let router=new VueRouter({
routes:[
{path:'/tem1/:id/qqq/:cid',component:tem1},
{path:'/tem2',component:tem2},
]
})
new Vue({
el:'#app1',
data:{
},
router
})
</script>
