20190702——Vue.router阅读

安装

npm install vue-router

然后我们想要在一个模块工程中使用它，必须要通过Vue.use(VueRouter)

介绍
Vue Router是Vue.js官方的路由器，它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。
包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。下面是个基本例子：

html

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

router-link标签相当于一个a标签

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

this.$router.go(-1)
返回上一页

<template>
    <div>
      <div>我是goback界面，用来测试返回的函数</div>
      <button @click="back" class="btn"></button>
    </div>
</template>

<script>
export default {
  name: 'goback',
  methods: {
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.btn{
  height: 20px;
  margin: 20px;
  border: 1px solid black;
}
</style>

this.$router.push(‘/’)
相当于直接跳转到这个/这个路径

关于router的动态路由跳转

<template>
  <div>
    <div>
      我是马铭泽，这里存放着我的小练习的实例
    </div>
  <router-link to="/rem">关于rem</router-link>
  <router-link to="/flexcss">关于flex布局</router-link>
  <router-link to="/useiconfont">关于单页面iconfont组件</router-link>
  <router-link to="/alliconfont">关于全局iconfont组件</router-link>
  <router-link to="/goods">关于router动态路由匹配</router-link>
  </div>
</template>

<script>
export default {
  name: 'mmz'
}
</script>

<style scoped>

</style>

<template>
    <div>
      <div>
        实现router中的动态路由
        <span>{{$route.params.goods_id}}</span>
      </div>
    </div>
</template>

<script>
export default {
  name: 'goods'
}
</script>

<style scoped>

</style>

{
      path: '/goods/:goods_id',
      name: 'goods',
      component: goods
    }

找了很多关于动态路由的功能
根据商品的id返回指定商品的详情页
这个功能最为准确，再拥有同样类型的界面的时候可以使用动态路由，只改变其中的内壳。

嵌套路由
已经实现了，就是相当子路由的概念

编程式的导航
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

声明式和编程式

// 字符串
router.push('home')

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

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

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

router.go（）
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

这跟代码调用 router.push() 是一回事：

router.push({ name: 'user', params: { userId: 123 }})

重定向和别名
重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：
const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] })
重定向的目标也可以是一个命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

甚至是一个方法，动态返回重定向目标：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

别名

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么“别名”又是什么呢？

我使用别名之后，当我输入的url是xixi的时候，也会跳转到这个bieming的url下面的bieming我所写的vue组件。

路由组件传参
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦：
下面这个例子是取代$route的耦合

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})