Vue的路由模式和跳转方式

一、声明式路由跳转方式

1. push跳转

<router-link to="路由"></router-link>

	- 相当于调用了router.push()方法，这个值可以是一个字符串或者是描述目标位置的对象
	- 表示添加一个路由，会产生历史记录，页面跳转之后可以通过后退按钮返回

2. replace跳转

<router-link to="路由" replace></router-link>

	- 相对于调用了router.replace()方法，这个值可以是一个字符串或者是描述目标位置的对象
	- 表示替换一个路由，不会产生历史记录，页面跳转之后无法通过后退按钮返回

二、配置路由

1. 动态路由匹配
   - 一个组件，匹配多个同种模式的路由，每个路由之间由参数区分
   - 当有不同id，但是都需要同一个组件来渲染，可以使用动态路由进行匹配:
   {path: '/router/:id'}
   - 当匹配到一个路由时，可以使用$router.params.id获取接受到的id信息
   - 可以在一个路由中设置多段路径参数，对应的值会设置到$route.params中

/* 配置路由 */
const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

/使用router-link跳转页面
<!-- 字符串拼接-->
<router-link :to="'/user/'+id"></router-link>
<!-- 命名路由 -->
<router-link :to="{ name:'user', params:{id:'liyang'} }"></router-link>

原来的组件会被复用，生命周期钩子不会再被调用。如果还想对路由参数的变化作出响应的话，可以使用 watch (监测变化) $route 对象

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }
}

三、编程式跳转

1. 页面模版中使用方法-配合行内事件，实现简单的业务逻辑

$router.push() 		//- 会产生历史记录
$router.replace()	// - 不会产生历史记录
$router.go(-1)		//- 正:前进或负:后退

2. 路由的写法

$router.push("/pro/"+proId)
$router.push({name:"pro", params:{proId:id}})
$router.push({path:"/pro"+proId})

3. js中使用方法 - 实例的选项中使用

this.$router.push()
this.$router.replace()
this.$router.go(-1)

4. 路由的写法

this.$router.push("/pro/"+proId)
this.$router.push({name:"pro", params:{proId:id}})
this.$router.push("/pro/"+proId)

5. params方式传输的数据，解析：

$route.params.参数名
this.$route.params.参数名

6. query方式传输的数据，解析

$route.query.参数名
this.$route.query.参数名

路由模式

1. hash模式：在浏览器中符号“#”，用window.location.hash读取
   特点： hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

2. history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
   **特点：**前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。