16. Vue的路由Vue Router -1

转载

mb6004f88aa04b6 2021-01-21 09:57:51

文章标签 Vue Vue Router 文章分类 Node.js 前端开发

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

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

Vue Router将分为两个部分：

Vue Router基本使用（本篇）
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相关配置的地方： 16. Vue的路由Vue Router -1_Vue

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

安装vue-router

npm install vue-router复制代码

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

// src/router/index.js// 1. 引入vue和VueRoterimport Vue from "vue";import VueRouter from "vue-router";// 这里引入的Home是我们提前在views文件夹下创建的组件import Home from "../views/Home.vue";// 2. 注册VueRoterVue.use(VueRouter);// 3. 创建一个VueRouter对象const routes = [
  {path: "/",  // 路由的路径name: "Home", // 组件名称component: Home  // 关联的组件名称
  },
  {path: "/about",name: "About",// 路由的懒加载写法，该组件会被延迟加载，推荐这样写component: () =>  import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];// new一个VueRouterconst router = new VueRouter({  mode: "history",   // 指定用什么方式跳转路由
  base: process.env.BASE_URL,
  routes
});// 4. 导出router对象export default router;复制代码

在入口文件main.js中注册router

// main.jsimport Vue from "vue";import App from "./App.vue";import router from "./router";  // 导入routerVue.config.productionTip = false;new Vue({
  router,    // 注册router
  render: h => h(App)
}).$mount("#app");复制代码

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

vue add router复制代码

VueRouter的基本使用

基本使用

老规矩，翠花上代码：

<!-- 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中指定的路由列表！

代码方式跳转

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

老规矩，翠花上代码：

<!-- 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()的方式注册!