Vue Router 路由管理

路由

• 路由本质就是对应关系
• 路由分两种

1.后端路由

• 概念：根据不同的用户 URL 请求，返回不同的内容
• 本质：URL请求地址与服务器资源之间的对应关系
• 后端路由根据不同URL地址分发不同资源

2.前端路由

• 概念：根据不同的用户事件，显示不同的页面内容
• 本质：用户事件与事件处理函数之间的对应关系
• 前端路由负责事件监听，触发事件后，通过事件函数渲染不同内容

SPA（Single Page Appliction）

• 后端渲染（存在性能问题）
• Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）
• SPA 单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址栏的前进和后退操作
• SPA 实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的URL请求）
• 在实现SPA过程中，最核心的技术点就是前端路由

Vue Router

初步了解

• Vue Router 是 Vue.js 官方的路由管理，和Vue.js 的核心深度集成，可以非常方便的用于SPA应用程序的开发

功能

• 支持HTML5历史模式或hash模式
• 支持嵌套路由
• 支持路由参数
• 支持编程是路由
• 支持命名路由

// HTML
<!-- 一个简单的单页面效果 -->
    <!-- 1.导入路由文件 此处我用的式本地地址 -->
    <script src="./js/vue_2.5.22.js"></script>
    <script src="./js/vue-router_3.0.2.js"></script>
    <div id="app">
      <!-- 2.使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <router-link to='/wo'>wo</router-link>
      <router-link to='/ai'>ai</router-link>
      <router-link to='/ni'>ni</router-link>
      <router-link to='/woaini'>woaini</router-link>
      <!-- 3.路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>

// JavaScript
    // 4.定义组件
      const wo = {
        template: '<h1>我</h1>'
      }
      const ai = {
        template: '<h1>爱</h1>'
      }
      const ni = {
        template: '<h1>你</h1>'
      }
      const woaini = {
        template: '<h1>我爱你</h1>'
      }

      // 5.定义路由
      const routes = [
        {path:'/wo',component: wo},
        {path:'/ai',component: ai},
        {path:'/ni',component: ni},
        {path:'/woaini',component: woaini}
      ]

      // 6.创建路由实例对象
      const router = new VueRouter({
        routes
      })
      
      // 7.挂载
      var vm = new Vue({
        el:'#app',
        data:{
          comName:'woaini'
        },
        router
      })

路由重定向

• 当我们刚打开页面时，页面是没有响应数据的，所以我们给它添加一个当地址为 ‘/’ 时，渲染出一个页面，也是主页面
• 我们应该在上述代码的第五步定义路由中，添加一个：

{path:'/',redirect:'/wo'} // 路由重定向

嵌套路由

• 父级路由通过children属性配置子级路由

// 在父组件里嵌套两个tab，如何给这两个tab添加路由
const woaini = {
    template: `
      <h1>
        <p>我爱你</p>

        <!-- 子路由连接 -->
        <router-link to='/woaini/tab1'>tab1</router-link>
        <router-link to='/woaini/tab2'>tab2</router-link>

        <!-- 子路由占位符 -->
        <router-view></router-view>
      </h1>
    `}
// 定义路由
// 定义子路由 children 是一个数组
        {path:'/woaini',
        component: woaini,
        children:[{
            path:'/woaini/:id',
            component: npy
        }]}
// 用一个children属性添加路由，和外面一样的格式

动态路由匹配

// 第一种
// 匹配路由以/user/开头，咧如：/user/123
{path:'/user/:id',component: User}
// 路由: /user/
// 参数：id=123
// 在组件中用 $route.params.id 获取到值

// 第二种 
// 路由组件传递参数
// 当props为布尔值
{path:'/user/:id',component: User,props:true}
// 接受参数
// 在组件内一个props属性，接受参数
 const User = {
      props:['id'],
      template:`
      <h1>用户页面{{id}}</h1>  
`}  // <h1>用户页面123</h1>

//第三种
//当props为对象类型，当前获取不到id值
{
  path: '/user/:id',
  component: User,
  props: { uname: 'XiaoPan', age: 20 },
}
// 接受方法和上面一样

// 第四种
// 既可以获取传递的id值，也可以获取到，自己添加的对象
props: (route) => ({
        uname: 'XiaoPan',
        age: 20,
        id: route.params.id,
      })
// 接受方法也是 props：['id','uname','age']

命名路由

• 为了更加方便地表示路由的路径,可以给路由规则起一个别名,即为命名路由命名路由可以实现跳转和使用params属性传递参数
• 咧如：

// 命名路由就是给路由添加一个name值
    {
      name:'user', // 命名路由
      path: '/user/:id',
      component: User,
      props: (route) => ({
        uname: 'XiaoPan',
        age: 20,
        id: route.params.id,
      }),
    }

    <!--命名路由可以直接路由导航,和传参,但是to要属性绑定-->
    <router-link :to="{name:'user',params:{id:3}}">用户3</router-link>

页面导航两种方式

• 声明式导航:通过点击链接实现导航的方式,叫作声明式导航 如上
• 编程式导航:通过调用Javascript形式的API实现导航的方式,叫做编程式导航
• 基本用法:
• this.$router.push(‘hash地址’) // 导航
• this.$router.go(n) // 后退（-1） 前进（1）