vue路由

1.安装:

  文件script引入:

    <script src="/path/to/vue.js"></script>

    <script src="/path/to/vue-router.js"></script>

  或者

    npm install vue-router

  然后在entry.js中

    import Vue from 'vue'

    import VueRouter from 'vue-router'

    Vue.use(VueRouter)

2.基本构建:

  假设已有组件A,B。

  1.创建routes数组:

    const routes=[ {path:'linkToA',component:A}, {path:'linkToB',component:B}];  //路由地址与组件的映射。

  2.创建router实例:

    const router = new VueRouter({
      routes // (缩写)相当于 routes: routes
    })

  3.将router实例注入根实例:

    const app = new Vue({
      router
    }).$mount('#app')

HTML:

  <div id="app">

    <router-link to="linkToA">Go to A</router-link>
    <router-link to="linkToB">Go to A</router-link>

  </div>  

2.动态参数:

  <router-link to=‘/user/foo’> to foo</router-link>    <router-link to=‘/user/bar’> to bar</router-link> 

  <router-view></router-view>  //视图组件在此渲染

  当某个视图需要被复用的时候,比如<router-link>跳转到‘/user/foo’或‘/user/bar’,需要展示的是同一张视图,只是用户名字不一样。

  这时候在routes数组中,可以使用 {path: '/user/:id', component: user,}  即一个视图组件来匹配‘/user/foo’或‘/user/bar’这一级的视图。

  :id称为路径参数,冒号:是路径参数的标志,id此时是一个变量,对应着<router-link>标签to属性中“/user/”下一级的段名。

  比如:

  点击<router-link to=‘/user/foo’> to foo</router-link>之后,当前路径path就改变成‘/user/foo’,此时变量id=‘foo’,保存在$route.params.id中。

  点击<router-link to=‘/user/bar’> to bar</router-link>之后,当前路径path就改变成‘/user/bar’,此时变量id=‘bar’,保存在$route.params.id中。

  但是我们调用的还是同一个组件user。

  *官网指出,使用路由参数时候,因为组件实例被复用了,所以其生命周期钩子(钩子即函数,比如这个组件实例被创建、挂载、销毁的时刻,可以触发相应的函数,这种函数称为钩子)不会被触发。

  ————“想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象”

  watch: {

     '$route' (to, from) { // 对路由变化作出响应... }

  }

3.路由嵌套:

  一个视图里面如果还需要渲染另一个视图,比如user组件中还想展示一个视图data。

  可以在user组件 的<template>中添加<router-view>

  <template>

    <div>

    <router-link :to="('/user/'+$route.params.id+'/data')">show  data</router-link>

    <router-view></router-view>

    </div>

  </template>

  上面的例子只想说名三个点:

  *<router-view>渲染的组件中可以嵌套<router-view>和<<router-link>。

  *组件的template只能有一个根元素

  *如果我们想在子视图中再使用<router-link>,但是前面已经用了动态路由参数,可以给to特性加v-bind,然后用上面的方法往路径中添加$route.params.id。因为v-bind绑定后to的值是一个js。

  另外,:to后面可以加一个对象字符串{name:xxx,params:{key:val}}.

$route:

   表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息.

  $route.path --string
    对应当前路由的绝对路径
  $route.params --Object
    一个 key/value 对象,包含了 动态片段 和 全匹配片段
  $route.query --Object
    一个 key/value 对象,表示 URL 查询参数。
  $route.hash --string
  $route.fullPath --string
    完成解析后的 URL,包含查询参数和 hash 的完整路径。
  $route.matched --Array<RouteRecord>
    包含当前路由的所有嵌套路径片段的 路由记录
  $route.name --string
    当前路由的名称,如果有的话。

programming routing:

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

  router.replace(location)
  router.go(n)

!!!在子组件中使用时,访问router应该用this.$router.

 

  

  

原文地址:https://www.cnblogs.com/alan2kat/p/7325249.html