vue路由 | 潇潇暮雨

路由的基本概念

路由是一个比较广义和抽象的概念,路由的本质就是一种对应关系.
前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系

vue-router的基本使用

介绍
- 它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用
- Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发
- Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router
- 官网：https://router.vuejs.org/zh/
Vue Router的特性：
- 支持H5历史模式或者hash模式
- 支持嵌套路由
- 支持路由参数
- 支持编程式路由
- 支持命名路由
- ....

基本使用步骤

1.导入js文件

// 导入vue文件
<script src="./lib/vue_2.5.22.js"></script>

//导入vue-router文件
<script src="./lib/vue-router_3.0.2.js"></script>

2.添加路由链接

// router-link 是vue 中提供的标签,默认会被渲染为a标签

// to属性默认会被渲染为 href 属性

// to属性的值默认会被渲染为#开头的hash地址

<router-link to='/user'>User</router-link>

3.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)

//路由填充位也叫做路由占位符

<router-view></router-view>

4.定义路由组件

var User = {
template:'<div>User</div>'
}

5.配置路由规则并创建路由实例

     // 创建路由实例对象
    const router = new VueRouter({
   // 所有的路由规则 （与之前的onhashchange的目的是一样的）
      routes: [//这个就是前端路由的具体体现
    // 每一个路由规则都是一个对象，包含path和component属性
        { path: '/user', component: User }
      ]
    })

6.将路由挂载到Vue实例中

 // 创建 vm 实例对象
    const vm = new Vue({
      // 指定控制的区域
      el: '#app',
      data: {},
      // router: router
      router
    })

路由重定向

router-view默认显示的组件，需要通过路由重定向来实现

const router = new VueRouter({
    // 所有的路由规则
    routes: [
        { path: '/', redirect: '/user'},//增加这一行代码，如果访问跟路径/，则重定向到/user
        { path: '/user', component: User },
        { path: '/register', component: Register }
    ]
})

嵌套路由

//1.父路由组件模板
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

//2. 子路由模板
const Register = {
        template: `<div>
          <h1>Register 组件</h1>
          <hr/>

          <!-- 子路由链接 -->
          <router-link to="/register/tab1">tab1</router-link>
          <router-link to="/register/tab2">tab2</router-link>

          <!-- 子路由的占位符 -->
          <router-view />
        <div>`
      }

//3.路由嵌套配置
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user', component: User },
          // children 数组表示子路由规则
          { path: '/register', component: Register, children: [
            { path: '/register/tab1', component: Tab1 },
            { path: '/register/tab2', component: Tab2 }
          ] }
        ]
      })

动态路由匹配

匹配规则定义时，动态路由语法为 ：参数名，以冒号开头，就代表是动态匹配
路由组件定义时，获取路由参数为：{{$route.params.参数名}}
$route.params.是固定写法
Vue实例的属性，都是$开头，比如$el

// 创建 vm 实例对象
const vm = new Vue({
  // 指定控制的区域
  el: '#app',
  data: {},
  // 挂载路由实例对象
  // router: router
  router
})

创建Vue实例时，传递的参数有：el,data,router
那么vm有了$el，$data，$router属性
但是获取动态参数，是**{{$route.params.参数名}}**
$route是vm对象中的属性，专门用于获取动态参数

 <div id="app">
    <router-link to="/user/1">User1</router-link>
    <router-link to="/user/2">User2</router-link>
    <router-link to="/user/3">User3</router-link>

    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
  const User = {
      template: '<h1>User 组件 -- 用户id为: {{$route.params.id}}</h1>'
    }
    // 创建路由实例对象
    const router = new VueRouter({
      // 所有的路由规则
      routes: [
        { path: '/', redirect: '/user'},
        { path: '/user/:id', component: User }
      ]
    })

    // 创建 vm 实例对象
    const vm = new Vue({
      el: '#app',
      data: {},
      router
    })

路由组件传递参数

props的值为布尔类型

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User, props: true }
        ]
      })
      const User = {
        props: ['id'],
        template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
      }

在组件的模板中，可以通过插值表达式访问到data和props中的数据属性.
路由定义规则中：props:true，代表给动态参数id，开启props传参（其实就是通过props方式传递参数）

props的值为对象类型

const User = {
        props: ['id', 'uname', 'age'],
        //这个id其实是拿不到值的
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User, props: { uname: 'lisi', age: 20 } }
        ]
      })

props的值为函数类型

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          }
        ]
      })
      const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

命名路由

 const router = new VueRouter({
  routes:[
  {
   path:'/user/:id',
   name:'user',
   component:User
   }
 ]
})
<router-link :to="{ name: 'user', params: {id: 3}}">User3</router-link>

编程式导航

 const User = {
        props: ['id', 'uname', 'age'],
        template: `<div>
          <h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>
          <button @click="goRegister">跳转到注册页面</button>
        </div>`,
        methods: {
          goRegister() {
            this.$router.push('/register')//跳转到注册页面（锚点），可以看下效果
          }
        },
      }
  const Register = {
        template: `<div>
          <h1>Register 组件</h1>
          <button @click="goBack">后退</button>
        </div>`,
        methods: {
          goBack() {
            this.$router.go(-1)//-1：后退1个界面
          }
        }
      }

push跳转锚点
go前进后退，参数n一个数字，代表前进后退几个界面
- n，代表前进n个界面
- -n，代表后退n个界面
push参数

//字符串(路径名称)
 router.push('/home')

//对象
router.push({path:'/home'})

//命名的路由(传递参数)
router.push({name:'/user',params:{userId:123}})

//带查询参数,变成/register?name=lisi
router.push({path:'/register',query:{uname:'lisi'}})