使用Vue-Router实现组件间跳转的方式有哪些

本文章向大家介绍使用Vue-Router实现组件间跳转的方式有哪些，主要包括使用Vue-Router实现组件间跳转的方式有哪些的使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名与空间、网站空间、营销软件、网站建设、忻府网站维护、网站推广。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

提供了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>
     <h2>这是我的登录页面</h2>
    </div>
   `
  })
  var testRegister = Vue.component("register",{
   template:`
    <div>
     <h2>这是我的注册页面</h2>
    </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>
     <h2>这是我的登录页面</h2>
     <router-link to="/myRegister">注册</router-link>
    </div>
   `
   /*to后面是路由地址*/
  })
  var testRegister = Vue.component("register",{
   template:`
    <div>
     <h2>这是我的注册页面</h2>
    </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>
     <h2>这是我的登录页面</h2>
     <router-link to="/myRegister">注册</router-link>
    </div>
   `
   /*to后面是路由地址*/
  })
  var testRegister = Vue.component("register",{
   methods:{
    jumpToLogin:function(){
     this.$router.push('/myLogin');
    }
   },
   template:`
    <div>
     <h2>这是我的注册页面</h2>
     <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-Router实现组件间跳转的方式有哪些的文章就介绍到这了，更多相关的内容请搜索创新互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持创新互联！

标题名称：使用Vue-Router实现组件间跳转的方式有哪些
文章起源：https://www.cdcxhl.com/article4/ijeiie.html

成都网站建设公司_创新互联，为您提供虚拟主机、微信公众号、、响应式网站、网站策划、App开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容