Vue 中的路由與Node 中的路由相似
引入文件
<script src="./vue-router-3.4.9.js"></script>
創(chuàng)建組件
<script>
? ? let registercopt = {
? ? ? ? template:'#register',
? ? }
? ? let logincopt ={
? ? ? ? template: "#login"
? ? }
</script>
創(chuàng)建?Router
? let sdfg = new VueRouter({
? ? ? ? routes:[
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name:'register',
? ? ? ? ? ? ? ? path:'/register',
? ? ? ? ? ? ? ? component:registercopt
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name:'login',
? ? ? ? ? ? ? ? path:'/login',
? ? ? ? ? ? ? ? component:logincopt
? ? ? ? ? ? }
? ? ? ? ]
? ? })
掛載router
? ? new Vue({
? ? ? ? el:'#adds',
? ? ? ? components:{
? ? ? ? ? ? registercopt,logincopt
? ? ? ? },
? ? ? ? router:sdfg
? ? })
使用router
<div id="adds">
? ? <router-link to="/register">注冊</router-link>
? ? <router-link to="/login">登錄</router-link>
? ? <hr style="color: aqua;">
????<!-- 負(fù)責(zé)展示組件-->
? ? <router-view></router-view>
</div>
router-link
1觉鼻、聲明式導(dǎo)航
router-link中的to屬性值可以是多種類型
字符串類型
<router-link to="/login">登錄</router-link>
對象類型
????path? ??
<router-link :to="{path:'/register'}">注冊</router-link>
????name
<router-link :to="{name:'register'}">注冊</router-link>
2嚣艇、編程式導(dǎo)航
methods:{
? ? loginGo(){
? ? ? ? this.$router.push({path:"/login"});
? ? }
}