Vue中route（路由）的基本用法

1、路由：前后端分离阶段与单页面富应用阶段(SPA)

 前后端分离阶段特点如下：

1. 前后端分离的开发模式，是通过使用Ajax技术来实现的。
2. 后端只通过API来返回数据，前端通过Ajax来获取数据，并通过javaScript将数据渲染到页面上。
3. 前后端分离有很大优点：分工清晰，后端能专注于数据，前端专注于交互和可视化。
4. 若使用到移动端上，后端不需要进行任何处理，依然可以使用之前的一套API

 单页面富应用阶段特点如下（Vue便是此类）：

1. 一般情况下，整个网站只有一个html页面。
2. 在前后端分离阶段，静态资源服务器中放了好几套html+css+js，来对应各个界面。但是在SPA中，有且仅有一个html+css+js。
3. 当你输入网站，它将全部资源都加载到浏览器中。
4. 比如你想进入你页面的首页，通过首页的url从浏览器获取的全部资源中抽取出需要的组件。

2、Vue中this.$router.push()的使用

 2、1：点击事件跳转页面的三种方式：

1. 无传递参数：

//  一般使用第一种
//  一、路径/home对应router目录下index.js中定义的path属性值（参数为路径名称）
this.$router.push('/home');

//  二、对应router目录下index.js中定义的path（参数为对象）
this.$router.push({path:'/home'});

//  三、对应router目录下index.js中定义的name（参数为路由命名）
this.$router.push({name:'Home'});

2. 有传递参数：

//  一、params里面放置的是我们要传递过去的参数
this.$router.push({name:'Home',params:{user:'david'}});

//  二、或者如同若依框架中的
this.$router.push('/system/user-auth/role/' + userId);
//  然后使用下列代码对传递的参数进行接收
const userId = this.$route.params && this.$route.params.userId;

3. 有查询参数

// 带查询参数，传递过去的内容会自动拼接变成/home?user=david
this.$router.push({path:'/home',query:{user:'david'}});

0. 使用name和path的区别
   使用path时，需要提供目标路由的完整路径，包括路由的路径和可能查询的参数。（即需要指定路由的相对路径）（适用于知晓目标的具体路径，且该路径改变可能性不大时）

//  如：
this.$router.push('/system/user-auth/role/' + userId);

  而使用name时，需要在路由配置中为目标路由设置一个名称，如此便可通过这个名称来进行路由导航，而不必关心实际的路径。（适用于减少对具体路径依赖的场景）

//  路由配置    往往在router中的index.js中
//  这里的component完全看你在index.js中导入了什么依赖
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
];

//  若此时我们想点击某按钮由Home路由转到About路由，就可以使用$router.push中的name

//  相关方法代码
<script>
export default {
  methods: {
    navigateToAbout() {
      // 使用 $router.push 和路由的名称进行导航
      this.$router.push({ name: 'about' });
    }
  }
};
</script>

//  使用name的一个很大的好处便是，即使在日后更改了路由的实际路径，只要保持名称不变，导航代码无需做任何改变。

 2、2：参数的接收：

//传参(使用params)
this.$router.push({name:'Home',params:{user:'david'}});   //注意发送这里是router
// 在name为Home的组件中接收参数
const id=this.$route.params.id;							 //注意接收这里是route（下同）
console.log(this.$route.params);//打印结果为{user:'david'}


//传参(使用query)
this.$router.push({name:'Home',query:{user:'david'}});
// 在name为Home的组件中接收参数
const id=this.$route.query.id;
console.log(this.$route.query);//打印结果为{user:'david'}

 2、3：Vue-router跳转的具体使用：

1. $router.push()主要利用router\index.js下的export内容以及下图中的内容：
      

2. <router-link to="/xxx">中的xxx对象便是对应着router\index.js中的设置，例如：
   
           

 2、4： vue-router的router.beforeEach（全局路由管理器）

前端每个页面跳转时，都要进到这个页面里面。（一般写在permission.js中）

 2、5： vue-router的hash模式与history模式

1. hash模式
   vue-router的默认便是hash模式
    在hash模式下，当url发生变化时，浏览器会进行记录，因此可以使用前进后退按钮。
    在hash模式下，url中会带有’#‘字符，且修改内容时，是修改’#‘后面内容。
    在hash模式下，url中会带有’#‘字符，且修改内容时，是修改’#'后面内容。
    在hash模式下，当url发生改变时，页面不会重新进行加载。
2. history模式
    使用两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化。
    在history模式下，url中不会带有’#'字符。
    在history模式下，前端url必须和实际向后端发起请求的url一致，若如http://www.goulizi.com/vue/router中，后端没有对/vue/router的路由处理，页面将会返回404错误。（而hash模式则不会返回404）

但在若依框架中使用的是history模式：