Vue路由类似于Node中的路由
Node路由:路由根据
不同的请求地址
,执行不同的函数
Vue路由:路由根据
不同的路径
,执行不同的组件
组件注册:全局注册、局部注册
组件分类:1、路由组件 2、普通组件
Vue Router使用步骤
1.引入vue文件
2.创建组件
//注册
let RouterC = {
template:"#register"
}
//登录
let RouterA = {
template:"#login"
}
new Vue({
el:"#app",
components:{
RouterC,RouterA
},
})
3.创建router路由
//创建路由
let vueRouter = new VueRouter({
routes:[
{
name:"register",
path:"/register",
component:RouterC
},{
name:"login",
path:"/login",
component:RouterA
},
]
})
4.挂载router路由
new Vue({
el:"#app",
components:{
RouterC,RouterA
},
router: vueRouter
})
router-link导航
声明式导航
1、字符串类型
<router-link to ="/register">注册</router-link>
2、对象类型
path
<router-link :to ={path:'/login'}>登录</router-link>
name
<router-link :to ={name:'login'}>登录</router-link>
编程式导航
使用声名式导航底层$router.push()方法进行导航
methods:{
loginGp(){
this.$router.push({name:"login"});
}
}