Vuejs学习笔记--router笔记(1)

1. 基本使用

1.1 安装

npm install vue-router --save

2. vue执行的流程图

 

 

 

3. 路由的默认值和修改为history模式

3.1 路由的默认值：添加一个组件

{
    path: '',
    redirect: '/home'
}

3.2 修改为history模式：在路由对象下添加mode属性

const router = new Router({
    routes,
    mode:'history',
})

4. router-link其他属性

补充：router-link类似于button作用

<router-link>组件支持用户在具有路由功能的应用中点击导航。如果通过其他方式比如this.$router.push()等方式进行了路由跳转，就不用写<router-link>了

4.1 tag属性

可以指定<router-link>之后渲染成什么组件, 比如下面的代码会被渲染成一个<button>元素, 而不是<a>，默认是<a>标签

<template>
  <div id="app">
    <router-link to="/home" tag="button">首页</router-link>
    <router-link to="/about" tag="button">关于</router-link>
    <router-view></router-view>
  </div>
</template>

4.2 replace属性

replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中，

背景：当路由模式是history模式时，默认使用的是pushState方法（类似于栈模式，特点是先进后出），这种情况下，我们是可以通过浏览器的返回按钮来进行返回的

<template>
  <div id="app">
    <router-link to="/home" tag="button" replace>首页</router-link>
    <router-link to="/about" tag="button" replace>关于</router-link>
    <router-view></router-view>
  </div>
</template>

4.3 active-class属性

当<router-link>对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称

<template>
  <div id="app">
    <router-link to="/home" tag="button" replace active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">关于</router-link>
    <router-view></router-view>
  </div>
</template>

该class具体的名称也可以通过router实例的属性进行修改

export default new Router({
  routes,
  mode: "history",
  linkActiveClass: "active"
});

4.4 问题：刚才为了让路由组件之间能够跳转，我们使用了router-link标签。如果我们不想要写router-link呢？ 

解答：可以通过组件的$router属性实现同样的效果：

<template>
  <div id="app">
    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    homeClick () {
      // 通过代码的方式修改路由 vue-router
      // this.$router.push('/home');
      this.$router.replace('/home');
    },
    aboutClick () {
      // this.$router.push('/about');
      this.$router.replace('/about');
    }
  }
}
</script>

5. 动态绑定路由

5.1 通过动态绑定属性，动态绑定路由

 

 

5.2 获取动态路由中 userId 的信息

5.3 补充：$router  和  $route  区别

r o u t e 就是表示，当前哪个路由处于活跃状态，这个route表示的就是哪个路由组件。

r o u t e r 是我们在router/index.js当中创建的router对象，就是路由对象。这个路由对象当中有好几个路由。哪个路由处于活跃状态，route就是表示哪个路由组件。