本文主要为大家详细介绍了vue-router来实现组件间跳转的三种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
通过vuerouter来实现组件之间的跳转，供大家参考，具体内容如下
提供了3种方式实现跳转：
①直接修改地址栏中的路由地址
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<!-- 引入文件 -->
<script src="js/vue-router.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器 -->
<router-view></router-view>
</p>
<script>
var testlogin = vue.component("login",{
template:`
<p>
<h1>这是我的登录页面</h1>
</p>
`
})
var testregister = vue.component("register",{
template:`
<p>
<h1>这是我的注册页面</h1>
</p>
`
})
//配置路由词典
//对象数组
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"
}
})
</script>
</body>
</html>
②通过router-link实现跳转
<router-link to="/myregister">注册</router-link>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<!-- 引入文件 -->
<script src="js/vue-router.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器 -->
<router-view></router-view>
</p>
<script>
var testlogin = vue.component("login",{
template:`
<p>
<h1>这是我的登录页面</h1>
<router-link to="/myregister">注册</router-link>
</p>
`
/*to后面是路由地址*/
})
var testregister = vue.component("register",{
template:`
<p>
<h1>这是我的注册页面</h1>
</p>
`
})
//配置路由词典
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"
}
})
</script>
</body>
</html>
③通过js的编程的方式
jumptologin: function () {
this.$router.push('/mylogin');
}
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<!-- 引入文件 -->
<script src="js/vue-router.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器 -->
<router-view></router-view>
</p>
<script>
var testlogin = vue.component("login",{
template:`
<p>
<h1>这是我的登录页面</h1>
<router-link to="/myregister">注册</router-link>
</p>
`
/*to后面是路由地址*/
})
var testregister = vue.component("register",{
methods:{
jumptologin:function(){
this.$router.push('/mylogin');
}
},
template:`
<p>
<h1>这是我的注册页面</h1>
<button @click="jumptologin">注册完成,去登录</button>
</p>
`
})
//配置路由词典
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"
}
})
</script>
</body>
</html>
相关推荐：
关于vue-router实现组件间的跳转参数传递
实例详解vue组件间通信子与父详解（二）
vue.js每天必学之组件与组件间的通信
以上就是三种vue-router实现组件间跳转的方法的详细内容。