设为首页收藏本站
天气与日历 切换到窄版

 找回密码
 立即注册

QQ登录

只需一步，快速开始

此广告位出租
帆帆资源网»首页 › 编程教程 › 编程教程 › [vue]vue-router跳转用法详解
返回列表 发新帖
查看: 501|回复: 0

[Electron+VUE教程] [vue]vue-router跳转用法详解

[复制链接]
帆帆资源网

3188

主题

4

回帖

3290

积分

管理员

积分
3290
发表于 2024-2-27 10:33:30 | 显示全部楼层 |阅读模式
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部署



项目附件下载（附件项目中不包括依赖项）：


路由, 跳转, 文件, router, 进行

相关帖子

扫码关注微信公众号，及时获取最新资源信息！【下载附件优惠：VIP会员5折；永久VIP免费】
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

免责声明：
1、本站提供的所有资源仅供参考学习使用，版权归原著所有，禁止下载本站资源参与商业和非法行为，请在24小时之内自行删除！
2、本站所有内容均由互联网收集整理、网友上传，并且以计算机技术研究交流为目的，仅供大家参考、学习，请勿任何商业目的与商业用途。
3、若您需要商业运营或用于其他商业活动，请您购买正版授权并合法使用。
4、论坛的所有内容都不保证其准确性，完整性，有效性，由于源码具有复制性，一经售出，概不退换。阅读本站内容因误导等因素而造成的损失本站不承担连带责任。
5、用户使用本网站必须遵守适用的法律法规,对于用户违法使用本站非法运营而引起的一切责任，由用户自行承担
6、本站所有资源来自互联网转载，版权归原著所有，用户访问和使用本站的条件是必须接受本站“免责声明”，如果不遵守，请勿访问或使用本网站
7、本站使用者因为违反本声明的规定而触犯中华人民共和国法律的，一切后果自己负责，本站不承担任何责任。
8、凡以任何方式登陆本网站或直接、间接使用本网站资料者，视为自愿接受本网站声明的约束。
9、本站以《2013 中华人民共和国计算机软件保护条例》第二章 “软件著作权” 第十七条为原则：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。若有学员需要商用本站资源，请务必联系版权方购买正版授权！
10、本网站如无意中侵犯了某个企业或个人的知识产权，请来信【站长信箱312337667@qq.com】告之，本站将立即删除。
郑重声明：
本站所有资源仅供用户本地电脑学习源代码的内含设计思想和原理，禁止任何其他用途！
本站所有资源、教程来自互联网转载，仅供学习交流，不得商业运营资源，不确保资源完整性，图片和资源仅供参考，不提供任何技术服务。
本站资源仅供本地编辑研究学习参考，禁止未经资源商正版授权参与任何商业行为，违法行为！如需商业请购买各资源商正版授权
本站仅收集资源，提供用户自学研究使用，本站不存在私自接受协助用户架设游戏或资源，非法运营资源行为。
快速回复 返回顶部 返回列表