12-vue-router基础

安装vue-router

• 步骤一：使用npm安装

    npm install vue-router --save
  

• 步骤二：在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）

    - 1.导入路由对象，并且调用Vue.use（路由对象）
    - 2.创建路由实例，并且传入路由映射配置
    - 3.在Vue实例中挂载创建的路由实例
  

示例：
使用cli2创建之后的文件目录结构如下

router/index.js:

import Vue from 'vue'
// 导入路由
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// 通过Vue.use(插件)，安装插件
Vue.use(Router)

// 创建Router对象并导出
export default new Router({
  // 配置路由和组件之间的应用关系
  routes: [
    // 其中一个路由的映射关系，通过url/HelloWorld，就可以获取到HelloWorld组件的页面
    {
      // 访问路径 url + /
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

main.js:

import Vue from 'vue'
import App from './App'
// 如果导入的是一个文件夹，不指定文件名的话会去找该文件夹下的index.js文件，如当前导入则会去找./route/index.js
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // 导入router，等同于 router:router
  router,
  render: h => h(App)
})

路由的使用

基本使用

创建两个组件Home和About：

<template>
  <div class="about">
    <h1>About</h1>
  </div>
</template>

<template>
  <div class="home">
    <h1>Home</h1>
  </div>
</template>

然后在router中导入，这里采用了两种导入方式，推荐采用第二中，加载速度更快：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

然后在vue中使用<router-view/>占位符就可以将对应的组件渲染到页面上，这里是在项目中的app.vue中：

<template>
  <div id="app">
    <div id="nav">
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view/>
  </div>
</template>

结果如下：

动态路由:

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。这里拿user举例，我们会需要拿到不同用户的id，此时我们需要如下操作：

创建User组件：

<template>
  <div>
    <h1>User</h1>
    <!-- $route表示当前路由-->
    <h2>{{$route.params.id}}</h2>
  </div>
</template>

在router中做如下引用：

{
    path: '/user/:id',
    name: 'User',
    component: () => import(/* webpackChunkName: "user" */ '../views/User.vue')
  }

使用：

<router-link to="/user/123">User123</router-link> |
<router-link to="/user/456">User456</router-link>

此时就可以根据选择动态获取user id

路由传参

路由传参一般有两种形式：params和query

      <router-link :to="{name: 'User', query: {
        id: 123
      }}">User123
      </router-link>
      |
      <router-link :to="{name: 'User', params: {
        id: 456
      }}">User456
      </router-link>

使用query其参数会被放在url中：

而在params中则不会：

在router中皆可以看到：

嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

我们需要在user下嵌套一层profile，所要做的处理如下：

创建一个profile组件

<template>
  <h1>Profile</h1>
</template>

在User组件中添加嵌套 <router-view> ，这里为了展示方便同时加了<router-link> :

<template>
  <div>
    <h1>User</h1>
    <!-- $route表示当前路由-->
    <h2>{{$route.params.id}}</h2>
    <br>
    <div>
      <router-link :to="{name: 'profile'}">Profile</router-link>
      <router-view></router-view>
    </div>
  </div>
</template>

在router中的user的route中加入children（可以一直嵌套）：

{
    path: '/user/:id',
    name: 'User',
    component: () => import(/* webpackChunkName: "user" */ '../views/User.vue'),
    children: [
      {
        // 以 / 开头的嵌套路径会被当作根路径
        path: 'profile',
        name: 'profile',
        component: () => import(/* webpackChunkName: "Profile" */ '../views/Profile.vue')
      }
    ]
  }

结果如下：

编程式导航

主要是三大方法push、repalce和go

router.push(location, onComplete?, onAbort?):

	-- 想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录所以，当
	用户点击浏览器后退按钮时，则回到之前的 URL。
	-- 当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 
	router.push(...)。
	-- 值得注意的是，如果提供的是描述地址的对象，那么当提供 path时，params 会被忽略

声明式	编程式
<router-link :to="…">	router.push(…)

router.replace(location, onComplete?, onAbort?):

	-- 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉
	当前的 history 记录。

声明式	编程式
<router-link :to="…" replace>	router.push(…)

router.go(n):

	这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

官网示例

命名路由

简单来说就是给写的路由一个名字，方便调用：

可以直接使用导航跳转网页：

	router.push({name:'User', params: {id: '123'}})

官网示例

命名视图

这个个人感觉作用不大，有兴趣的可以去官网查看
官网示例

重定向和别名

重定向：
重定向常使用在初始进入网站时，这个时候一般会把你导向门户网站，在router中的一般使用：

  {
    path: '/',
    // redirect: '/home'      返回路由
    // redirect: {name: Home} 返回命名路由
    redirect: to => {         // 方法
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
      console.log(to)
      return '/home'
    }
  },

此时访问/ 会自动导向/home

别名：
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

{
    path: '/home',
    name: 'Home',
    component: Home,
    alias: '/ahome'
  }

此时访问/ahome实际上也是去访问了/home，但是url上显示的是/ahome

路由组件传参

简单来说就是把路由的参数想办法传递给组件，让路由参数成为组件内的数据，避免去使用$router或者$route的方式去获取路由内参数。

主要是三种办法：

布尔模式：如果 props 被设置为 true，route.params 将会被设置为组件属性。
对象模式：如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。
函数模式：你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

布尔模式解析：

对象模式解析:

函数模式解析：