您的位置：首页 > Web前端 > Vue.js

Vue全家桶学习 二、Vue-Router的使用详解

2019-03-12 09:45 309 查看
1. vue-router安装
  • 如果在vue-cli 构建项目中没有安装vue-router ,可以由npm自行安装。安装命令 ：npm install vue-router --save
2. 模块化开发配置路由器
  • 引入路由模块和组件页面 import VueRouter from ‘vue-router’
  • import PageOne from ‘…/pages/page1/Page’
  • import PageTwo from ‘…/pages/page2/Page’
  • import PageThree from ‘…/pages/page3/Page’
  • 路由配置以及路由属性

      path:指定路由路径

    • name:指定路由名称

    • component:指定路由组件

    • redirect: 路由重定向

    • children:子路由配置

      例 ：如图页面初始化进入PageOne页面

  • 动态路由配置如图
      动态路径参数 以冒号开头 /:
    • 多个参数后面加斜杠 /: params 如图
  • 动态路由页面操作
      案例组件page1跳转到page2并且携带id,name两个参数
        router-link 路由跳转标签
      1. 表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。其中name是路由配置中的name,params是参数。
      2. router-view路由渲染
      3. 这里在state里面定义了curid为12 , curname为jack截图部分看不到
    • page2参数接收 通过 $route.params.参数名来接收页面传递的参数
  • 实现效果如图


    • 嵌套路由配置及使用 嵌套路由配置 children：配置page3的子路由subpage,subpage2
    • redirect：路由重定向到subpage页面
  • 页面实现也非常简单
      直接使用router-link跳转,router-view选软渲染组件上面都讲过了
    @本文原创发布于CSDN ，转载请注明出处
    • 内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航