当前位置：188资源网 > 网站系统源码 > C/C++源码 > [vue]vue-router跳转用法详解
188资源网188资源网 C/C++源码 其它教程 其它源码

[vue]vue-router跳转用法详解

vue-router是一个单页面的路由器，也就是说所有的跳转都会在这个页面实现。

这种只需要跳转页面，不需要添加验证方法的情况，可以使用 <router-link> 来实现导航的功能：

1、简单的跳转。
①首先要安装vue-router，利用npm进行安装

npm install vue-router或者cnpm install vue-router

②进行引用，<router-link to=”/user”>user</router-link>  router-link指定路径，to指向所要跳转的url

                    <router-view></router-view>显示url的内容，也可写成<router-view/>

  1. <template>
  2.   <div class=”hello”>
  3.           <h1>{{ msg }}</h1>
  4.           <ul>
  5.                 <li><router-link to=”/about”>{{about}}</router-link></li>
  6.                 <li><router-link to=”/home”>{{home}}</router-link></li>
  7.         </ul>
  8.         <router-view></router-view>
  9.   </div>
  10. </template>

复制代码

②在component文件夹新建about.vue  home.vue文件，按照默认模版about.vue

  1. <template>
  2.         <div>
  3.         <h1>{{msg}}</h1>
  4.         <router-link to=”/”>返回</router-link>
  5.         </div>
  6. </template>
  8. <script>
  9.         export default { //ES6语法，用于输出到外部，这样就可以在其他文件内用import输入
  10.           name: ‘about’,
  11.           data () {    //由于是组件，data必须是个函数，这是ES6写法，data后面加括号相当于data: function () {}
  12.             return {   //记得return不然接收不到数据
  13.               msg: ‘Welcome’ //上面的 msg 就是这里输出的
  14.             }
  15.           }
  16.         }
  17. </script>
  19. <style>
  20. </style>

复制代码

home.vue

  1. <template>
  2.         <div>
  3.         <h1>{{msg}}</h1>
  4.         <router-link to=”/”>返回</router-link>
  5.         <router-view></router-view>
  6.         </div>
  7. </template>
  9. <script>
  10.         export default { //ES6语法，用于输出到外部，这样就可以在其他文件内用import输入
  11.           name: ‘home’,
  12.           data () {    //由于是组件，data必须是个函数，这是ES6写法，data后面加括号相当于data: function () {}
  13.             return {   //记得return不然接收不到数据
  14.               msg: ‘一级路由内容 Welcome’ //上面的 msg 就是这里输出的
  15.             }
  16.           }
  17.         }
  18. </script>
  20. <style>
  21. </style>

复制代码

③在src文件夹下新建一个router.js文件，进行配置引入vue和vue-router，切记要加上Vue.use(VueRouter)

  1. import Vue from ‘vue’
  2. import VueRouter from ‘vue-router’
  4. import home from ‘./components/home.vue’
  5. import about from ‘./components/about.vue’
  7. Vue.use(VueRouter)

复制代码

引入你新建的about.vue  home.vue文件，配置路由，指定路由和组件之间的关系

  1. const routes = [{
  2.         path: ‘/home’,
  3.         component: home,
  4.     },
  5.     {
  6.         path: ‘/about’,
  7.         component: about
  8.     }
  9. ]

复制代码

定义router，完整的router.js代码如下：

  1. import Vue from ‘vue’
  2. import VueRouter from ‘vue-router’
  4. import home from ‘./components/home.vue’
  5. import about from ‘./components/about.vue’
  7. Vue.use(VueRouter)
  9. const routes = [{
  10.         path: ‘/home’,
  11.         component: home,
  12.     },
  13.     {
  14.         path: ‘/about’,
  15.         component: about
  16.     }
  17. ]
  19. var router = new VueRouter({
  20.     mode: ‘history’,
  21.     base: __dirname,
  22.     routes
  23. })
  24. export default router

复制代码

重点或者易错点：export default router这句话要记得加上，不然会报下面的警告

④配置main.js，详细见下面代码

  1. import Vue from ‘vue’
  2. import App from ‘./App’
  3. // 引入路由
  4. import router from ‘./router’
  6. Vue.config.productionTip = false
  8. new Vue({
  9.         el: ‘#app’,
  10.     router,
  11.     // 注入到根实例中
  12.     components: { App },
  13.     render: h => h(App)
  14. }).$mount(‘#app’)

复制代码

2、子路由的跳转
在1的基础，进行子路由的跳转，

①在home文件夹下新建两个vue文件，作为子路由所要展示的内容

②在router中配置子路由，在上一节点的内容加上子路由，利用chilren特性

  1. const routes = [{
  2.         path: ‘/home’,
  3.         component: home,
  4.         children: [{
  5.                 path: ‘computer’,
  6.                 component: computer
  7.             },
  8.             {
  9.                 path: ‘phone’,
  10.                 component: phone
  11.             }
  12.         ]
  13.     },
  14.     {
  15.         path: ‘/about’,
  16.         component: about
  17.     }
  18. ]

复制代码

③在父页面写上

<router-view></router-view>

以显示子页面的内容


上述示例代码全部在附件中，感兴趣的可以下载看一下。
代码采用HBuilderX生成的vue-cli项目，项目预览情况如下：

在IIS下部署，需要编译生成文件，生成命令

npm run build

详细VUE搭建IIS站点参见 windows下搭建vue开发环境+IIS部署
下载说明：
1.本站资源都是白菜价出售，同样的东西，我们不卖几百，也不卖几十，甚至才卖几块钱，一个永久会员能下载全站100%源码了，所以单独购买也好，会员也好均不提供相关技术服务。
2.如果源码下载地址失效请联系站长QQ进行补发。
3.本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除!
4.本站站内提供的所有可下载资源（软件等等）本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发）；但本网站不能保证资源的准确性、安全性和完整性，由于源码具有复制性，一经售出，概不退换。用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug；同时本站用户必须明白，【188资源网】对提供下载的软件等不拥有任何权利（本站原创和特约原创作者除外），其版权归该资源的合法拥有者所有。
5.请您认真阅读上述内容，购买即以为着您同意上述内容。
188资源网 » [vue]vue-router跳转用法详解

相关推荐

提供最优质的资源集合

立即查看 了解详情