Vue 中的路由与Node 中的路由相似
引入文件
<script src="./vue-router-3.4.9.js"></script>
创建组件
<script>
let registercopt = {
template:'#register',
}
let logincopt ={
template: "#login"
}
</script>
创建 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;">
<!-- 负责展示组件-->
<router-view></router-view>
</div>
router-link
1、声明式导航
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、编程式导航
methods:{
loginGo(){
this.$router.push({path:"/login"});
}
}
