Vue-Router来实现组件间跳转的三种方法

2024-05-06 15:24:43

字体：大中小

来源：转载

供稿：网友

通过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>

上一篇：vue组件watch属性实例讲解

下一篇：vue2+el-menu实现路由跳转及当前项的设置方法实例

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注