Vue Router的基础使用

看过很多vue相关的教程,我觉得是讲的人很嗨,不管你听不听得懂,总是自说自话,学的人是没有办法坚持下去,能坚持下去的,扔掉教程自己写一遍完全懵逼,其实vue最大的好处就是组件化开发。那么,vue的学习就得最终回归到组件化里边去,只有去到组件化开发环境中去切实走一遍之前学过的知识点,通过一个项目完全串联,才会领略到vue的强大,否则,我个人认为,如果你对jquery够熟悉,它也足够的优秀!

这一章节我们正式进入vue的周边生态vue-router,正式进入真实项目中学习,串联起之前的所有知识! 如果你还没有创建项目,请看上一张veu/cli相关知识!或者关注CRMEB掘金号查看vue系列文章,我们一起学习,在技术的世界互相碰撞交流!

Vue Router将分为两个部分:

  1. Vue Router基本使用(本篇)
  2. Vue Router动态传参及导航守卫(下篇)

什么是vue-router?

官方解释: vue-router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。

个人总结: vuerouter是vue的一个路由系统,一个路由地址对应一个组件,采用的是html5的 history锚链接 的方式进行组装跳转。

history锚链接的概念这里不做过多解释,在vue里的表现形式就是链接里有没有#号的区别,但其内在肯定是有不同的,具体大家有兴趣可自行去了解下,我这里要说的是,上边提到了一个路由的概念,那么什么是路由?

什么是路由?

路由一词相信生活中常听到的就是路由器,一个路由器可以连接多台电脑,供多台电脑同时联网,这是因为路由器可以生成多个网络地址,一个网络地址对应一台电脑,这就构成了一个端到端的网络路径!

web里的路由原理也是类似的,根据URL来将请求分配到指定的一个‘端’,那么在vue里充当这个端的就是组件。简单理解下路由的概念就是这样,具体专业的解释,大家可以去百度百科了解下,这里就不做过多专业名词的搬运,希望通过我的理解能给大家带来一些启发!

VueRouter的基本配置

在上一章我们通过vue-cli创建项目的时候,我们已经勾选默认安装了vue-router,在项目的src文件夹下有个router的文件夹,文件夹内部有个index.js的文件,这里放的就是vue-router相关配置的地方:

通过这个我们就可以梳理出一个简单的vue-router的使用流程,当然,如果你通过vue-cli创建项目时默认勾选,那以下步骤都可以省略!

  1. 安装vue-router
npm install vue-router

 

  1. 在src文件夹下创建一个router文件夹,再在其内部创建一个index.js文件,引入如下内容:
// src/router/index.js

// 1. 引入vue和VueRoter
import Vue from "vue";
import VueRouter from "vue-router";
// 这里引入的Home是我们提前在views文件夹下创建的组件
import Home from "../views/Home.vue";

// 2. 注册VueRoter
Vue.use(VueRouter);

// 3. 创建一个VueRouter对象
const routes = [
  {
    path: "/",  // 路由的路径
    name: "Home", // 组件名称
    component: Home  // 关联的组件名称
  },
  {
    path: "/about",
    name: "About",
    // 路由的懒加载写法,该组件会被延迟加载,推荐这样写
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];

// new一个VueRouter
const router = new VueRouter({
  mode: "history",   // 指定用什么方式跳转路由
  base: process.env.BASE_URL,
  routes
});

// 4. 导出router对象
export default router;

 

  1. 在入口文件main.js中注册router
// main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";  // 导入router

Vue.config.productionTip = false;

new Vue({
  router,    // 注册router
  render: h => h(App)
}).$mount("#app");

经过以上三个步骤就正式在项目中引入了vue-router,在代码中我都做了注释,大家看着注释了解下!其实当安装完vue-router,也就是步骤一之后,我们还可以通过一个命令自动帮我们引入这些,但前提是你必须实现备份原来的,否则会覆盖!

vue add router

VueRouter的基本使用

  1. 基本使用

老规矩,翠花上代码:

<!-- src/App.vue -->
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

这是vue-cli创建项目的时候默认在App.vue入口文件中自动生成的,可以看出,VueRouter 通过 router-link 组件来进行导航,通过 to 属性指定导航的链接,<router-link> 默认会被渲染成一个 <a> 标签。然后声明了一个router-view组件作为路由的出口,路由匹配到的组件将渲染到 <router-view></router-view> 标签中。

那么这两个路由地址其实对应的就是我们在router/index.js中的routes中指定的路由列表!

  1. 代码方式跳转

以上例子还可以通过编码的方式使用路由!

老规矩,翠花上代码:

<!-- src/App.vue -->
<template>
  <div id="app">
    <div id="nav">
    <!--
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      -->
      <button @click="homeClick">首页</button>
      <button @click="aboutClick">关于</button>
    </div>
    <router-view/>
  </div>
</template>


<script>
export default {
  name: 'App',
  // 代码方式跳转
  methods: {
    homeClick(){
     // this.$router.push('/') 
      this.$router.replace('/')
    },
    aboutClick(){
     // this.$router.push('/about')
      this.$router.replace('/about')
    }
  },
}
</script>

路由还可以通过在methods中定义一个方法来跳转路由,采用this.$router.push()this.$router.replace()的方式注册!

  • 区别:

$router.push(); 本质是向history栈中添加一个路由,在我们看来是切换路由,但本质是在添加一个history记录!

$router.replace(); 替换路由,没有历史记录,点击返回,会跳转到上上一个页面!