展开全部
直接修改地址栏中的路由地址即可：
{{msg}}
var testLogin = Vue.component("login",{
template:`
这是我的登录页面
`
})
var testRegister = Vue.component("register",{
template:`
这是我的注册页面
`
})
//配置路由词典
//对象数组
const myRoutes =[
//当路由地址：地址栏中的那个路径是myLogin访问组件
//组件是作为标签来用的所以不能直接在component后面使用
//要用返回值
//path:''指定地址栏为空：默认为Login页面
{path:'',component:testLogin},
{path:'/myLogin',component:testLogin},
{path:'/myRegister',component:testRegister}
]
const myRouter = new VueRouter({
//myRoutes可以直接用上面的数组替换
routes:myRoutes
})
new Vue({
router:myRouter,
//或者：
/*
router:new VueRouter({
routes:[
{path:'/myLogin',component:testLogin},
{path:'/myRegister',component:testRegister}
]
})
*/
el:"#container",
data:{
msg:"Hello VueJs"
}
})
一、通过router-link实现跳转
注册
{{msg}}
var testLogin = Vue.component("login",{
template:`
这是我的登录页面
注册
`
/*to后面是路由地址*/
})
var testRegister = Vue.component("register",{
template:`
这是我的注册页面
`
})
//配置路由词典
const myRoutes =[
{path:'',component:testLogin},
{path:'/myLogin',component:testLogin},
{path:'/myRegister',component:testRegister}
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
二、通过js的编程的方式
jumpToLogin: function () {
this.$router.push('/myLogin');
}
{{msg}}
var testLogin = Vue.component("login",{
template:`
这是我的登录页面
注册
`
/*to后面是路由地址*/
})
var testRegister = Vue.component("register",{
methods:{
jumpToLogin:function(){
this.$router.push('/myLogin');
}
},
template:`
这是我的注册页面
注册完成,去登录
`
})
//配置路由词典
const myRoutes =[
{path:'',component:testLogin},
{path:'/myLogin',component:testLogin},
{path:'/myRegister',component:testRegister}
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
)
的重要性)
Maven仓库介绍与本地仓库配置)
