首页 > 其他分享> 文章详细

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

2021-10-02 23:35:07 阅读：152 来源： 互联网

标签：Vuejs 笔记 replace -- 组件 router 属性路由 history

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其他属性补充

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就是表示哪个路由组件。

标签：Vuejs,笔记,replace,--,组件,router,属性,路由,history
来源： https://www.cnblogs.com/codermsz/p/15346054.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9