vue router路由的最全介绍和使用

Posted 2021-08-01 Mq_sir

vue router路由的介绍和使用

一、路由的介绍

对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。
路由的使用在vue是重点，也是核心所在。Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
就是我在页面点击一个按钮需要跳转到对应的页面，这就是路由跳转

学习路由我们得知道route、routes、router：

route：首先它是个单数，为路由，即我们可以理解为单个路由或者某一个路由；

routes：它是个复数，我们理解为多个路由的集合，事实上官方定义routes是一个数组；routes表示多个单个路由的集合；

router：这个是路由器，router是一个VueRouter的对象，用来管理路由，所以它内部肯定会有routes属性，还有其他的属性和方法。当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由；

二、创建一个新的Vue项目

会创建的人跳过。

我这里基于vscode来开发，在当前文件夹的集成终端里创建一个新的项目 vue init webpack my-purchase(项目名字) 如图所示，在Install vue-router选择yes会自动帮我们下载好路由。

切换到项目的路径下，如果没下载路由，就在终端中使用命令npm install vue-router -g来安装vue-router，运行npm run dev测试启动。关于vue基于vscode的环境搭建看这边博客Vue安装环境最全教程

三、路由的简单使用

当我们要使用时，我们只需要配好路由，把每一个需要的路由配置好，然后将路由挂载到根实例上全局就都可以使用了。

1. 编写三个vue页面组件，来让我们跳转

在src目录下新建一个views文件夹，我们通常把页面写在这

login.vue 其余两个页面都一样，只是放的文字不一样

<template>
  <div>
      这个是登录的页面
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

2. 在src/router/index.js中配置路由。

代码有注释

import Vue from 'vue'
import Router from 'vue-router' //导入路由模块
//导入组件
import Login from '../views/login'
import Register from '../views/register'
import Myinformation from '../views/myinformation'

Vue.use(Router)//全局使用路由模块


const routes = [//这是一组路由的集合
  {
    path: "/",//由于主页访问没有路径这里重定向到登录
    redirect: '/login',
  },
  {
    path: "/login",//访问路径
    name:'register',//路由自定义名称
    component:Login//路由跳转到的组件
  },
  {
    path: "/register",
    component:Register
  },
  {
    path: "/myinformation",
    component:Myinformation
  },
]

export default new Router({//router是一个VueRouter的对象，用来管理路由
  routes
})

3. 在main.js中把路由注入到根实例中

import Vue from 'vue'
import App from './App'
import router from './router'//import router 的router 一定要小写， 不要写成Router, 否则报 can't match的报错


Vue.config.productionTip = false


new Vue({
  el: '#app',
  router,// 将路由注入到根实例中，让整个应用都有路由功能
  components: { App },
  template: '<App/>'
})

4. 创建路由链接和路由视图

在我们需要使用的地方使用。
① 路由的链接：<router-link to="/...">...</router-link>

< router-link> 标签将会渲染成 a 标签，to 属性变成了a 标签的 href 属性，也就是点击跳转的意思。（用< router-link> 标签来代替< a>标签）

② 路由视图：<router-view></router-view>

< router-view> 标签将会渲染成我们定义的路由组件，其实它就是一个占位符。它出现什么地方，路由路径匹配的组件就出现什么地方；它出现几次，路由路径匹配的组件就出现几次。

编写App.vue

<template>
  <div id="app">
    <div class="left">
      <router-link to="/login">登录</router-link>
      <router-link to="/register">注册</router-link>
      <router-link to="myinformation">个人信息</router-link>
    </div>
    <div class="main">
      <router-view/>
    </div>
    
  </div>
</template>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  display: flex;
}
.left{
  height: 500px;
  width: 200px;
}
.main{
  background-color: #60f0f5e3;
  width: 300px;
  height: 500px;
}
</style>

效果：

当我在App.vue多添加一个 <router-view/>

路由的简单跳转就这样。路由的使用很复杂，还有动态路由，子路由，路由嵌套，路由的多种跳转方式，和路由的传参。可以说路由是vue的核心，非常重要。

╮(๑•́ ₃•̀๑)╭