vue-router入门

前言：

要学习如何使用Vue Router，首先就要了解什么是Vue Router。通过官方文档我们可知，Vue Router 是 Vue.js (opens new window)官方的路由管理器。

https://router.vuejs.org/zh/

那么路由管理器又是什么意思？其实发展到现在路由也分为后端路由和前端路由。

1. 什么是后端路由？
   早期的网站，页面是由后端负责渲染的，也就是说，用户每跳转到其他页面，都是访问后端服务器来获取页面的。
2. 什么是前端路由？
   前端路由就是把展示不同页面的任务交给前端来做。

正文

1.安装Vue Router
在创建vue项目时如果已经选择了Router，可以在package.json文件夹中看到如下图所示自己安装的router版本

如果没有选也没有关系，在需要使用Vue Router的项目文件夹下，命令行输入如下代码也同样可以安装。

 npm install vue-router --save

安装好之后就可以在目录中看到router文件夹

2.在入口文件中引入router
安装好路由后，项目并不知道我们安装了路由，就需要在入口main.js文件中引入路由，并使用。修改后的main.js文件如下

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

3.使用vue-router管理页面
router文件夹下的index.js就是我们管理路由的文件了，在这里将组件映射到路由就好了，也就是引入组件，之后给组件配置路由。具体代码如下，注释已经写的很清楚了~

// 0. 使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
import Vue from 'vue'//导入vue
import VueRouter from 'vue-router'//导入vue-router
Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
import Home from '../views/Home.vue'

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})
//导出router
export default router
// 现在，应用已经启动了！

4.在页面中如何实现路由跳转
实现路由跳转有标签跳转、js跳转两种方式。在开发时我们通常使用

1. 标签跳转

 <router-link to="/">Home</router-link> 
 <router-link to="/about">About</router-link>

3. js跳转， 参考文献如下

https://blog.youkuaiyun.com/weixin_44751462/article/details/94056144

1.  不带参数
 
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
 
2. query传参 
 
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
 
// html 取参  $route.query.id
// script 取参  this.$route.query.id
 
3. params传参
 
this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name
 
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
 
// html 取参  $route.params.id
// script 取参  this.$route.params.id
 
4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
 
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失