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>
<div id="container">
<p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器 -->
<router-view></router-view>
</div>
<script>
var testLogin = Vue.component("login",{
template:`
<div>
<h1>这是我的登录页面</h1>
</div>
`
})
var testRegister = Vue.component("register",{
template:`
<div>
<h1>这是我的注册页面</h1>
</div>
`
})
//配置路由词典
//对象数组
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>
<div id="container">
<p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器 -->
<router-view></router-view>
</div>
<script>
var testLogin = Vue.component("login",{
template:`
<div>
<h1>这是我的登录页面</h1>
<router-link to="/myRegister">注册</router-link>
</div>
`
/*to后面是路由地址*/
})
var testRegister = Vue.component("register",{
template:`
<div>
<h1>这是我的注册页面</h1>
</div>
`
})
//配置路由词典
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>
<div id="container">
<p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器 -->
<router-view></router-view>
</div>
<script>
var testLogin = Vue.component("login",{
template:`
<div>
<h1>这是我的登录页面</h1>
<router-link to="/myRegister">注册</router-link>
</div>
`
/*to后面是路由地址*/
})
var testRegister = Vue.component("register",{
methods:{
jumpToLogin:function(){
this.$router.push('/myLogin');
}
},
template:`
<div>
<h1>这是我的注册页面</h1>
<button @click="jumpToLogin">注册完成,去登录</button>
</div>
`
})
//配置路由词典
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路由钩子及应用场景（小结）
一.路由钩子语法在vue-router的官方文档中,将路由钩子翻译为导航守卫,下面是文档中的内容摘要,大家也可以通过传送门前往官网阅读详细内容路由钩子路
vue-router实现组件间的跳转（参数传递）
通过VueRouter来实现组件之间的跳转：参数的传递，具体内容如下login---用户名---main①明确发送方和接收方②配置接收方的路由地址{path:'/myTest',component:Tes
vue中SPA单页面应用程序详解
一、SPA的概述SPA（singlepageapplication）单页面应用程序，在一个完成的应用或者站点中，只有一个完整的html页面，这个页面有一个容器，可以把需要加载
编辑：广州明生医药有限公司
标签：路由,这是,页面,组件,跳转