本文主要为大家详细介绍了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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/9241" title="杰易CRM客户关系管理系统"><img
src="https://img.php.cn/upload/webcode/000/000/013/175843260589794.jpg" alt="杰易CRM客户关系管理系统" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/9241" title="杰易CRM客户关系管理系统">杰易CRM客户关系管理系统</a>
<p>软件介绍 a.. 当今的市场压力迫使企业在提高产品质量和性能的同时，降低成本和缩短产品上市的时间。每个企业都在努力更新自己，包括其生产过程和产品，以满足这些需求。实现这些目标的三种方法是：业务处理再设计、新技术应用、与顾客形成战略联盟。 b.. 对所有的商业应用只有建立整体的IT体系结构，才能形成战略优势，才能确定企业的突破口。这种新的体系结构是以三层结构标准为基础的客户关系</p>
</div>
<a href="/xiazai/code/9241" title="杰易CRM客户关系管理系统" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<!--通过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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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>相关推荐：
