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

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两个参数
    1. router-link 路由跳转标签
    2. 表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。其中name是路由配置中的name,params是参数。
    3. router-view路由渲染
    4. 这里在state里面定义了curid为12 , curname为jack截图部分看不到
  • page2参数接收
    • 通过 $route.params.参数名来接收页面传递的参数
• 实现效果如图

• 嵌套路由配置及使用

  • 嵌套路由配置
    • children：配置page3的子路由subpage,subpage2
    • redirect：路由重定向到subpage页面
  • 页面实现也非常简单
    • 直接使用router-link跳转,router-view选软渲染组件上面都讲过了

• 编程式导航：

   // 字符串
  this.$router.push('home')
  // 对象
  this.$router.push({ path: 'home' })
  // 命名的路由
  this.$router.push({ name: 'user', params: { userId: '123' }})
  // 带查询参数，变成 /register?plan=private
  this.$router.push({ path: 'register', query: { plan: 'private' }})
  

@本文原创发布于优快云 ，转载请注明出处