总结vue项目中路由跳转方式

1. 通过<router-link>跳转

    1.1 基本方式

	<div id="app">
		<h1>hello vue</h1>
		<!-- 使用router-link来导航 -->
		<!-- 通过传入的'to'属性指定链接 -->
		<!-- 默认会被渲染成一个<a>标签，可以通过tag属性更改 -->
		<router-link to="/page1"></router-link>
		<router-link :to="{path: '/page1'}"></router-link>
		<router-link :to="{name: 'page1'}"></router-link>
		<!-- 上面三种写法都可以，还能传递参数，这个在后面会提到 -->


		<!-- 路由出口 -->
		<!-- 路由匹配的组件将渲染到router-view 里 -->
		<router-view></router-view>
	</div>

首先需要一个基本的vue环境，这个不用多说了吧。下面我来详细说说<router-link>标签。

1.2 router-link介绍

<router-link>组件支持用户在具有路由功能的应用中（点击）导航，通过to属性指定目标地址，默认渲染成带有正确地址的<a>标签，可以通过tag属性设置生成别的标签。而且，当路由激活时，链接元素自动设置一个表示激活的css类名。

1.2.1 router-link与a标签相比的优点

• 无论是HTML5 history还是hash模式，它的表现行为都一致，所以当需要切换路由模式或者IE9降级使用hash模式，都无需更改代码。
• 在HTML5 history模式下，router-link会拦截点击事件，让浏览器不再重新加载页面。
• 当在HTML5 history模式使用base选项以后，所有的to属性都不需要写（基路径）了。

1.2.2 to属性

类型 String | Location 

表示目标路由的链接，当被点击后，内部会立即把to的值传给router.push()，所以这个值可以是一个字符串或者描述目标位置的对象。

<!-- 字符串 -->
<router-link to="Home"></router-link>
<!-- 渲染结果 -->
<a href="Home"></a>

使用v-bind的js表达式

<router-link :to="'page1'">Page</router-link>
<!-- 基本的用法，前面已经写过 这里写带参数的跳转 -->
<!-- 下面的结果为 /page1/id/1 这里路由设置那里应该这么写 /page1/id/:id --> 
<router-link :to="{name: 'page1',params:{id: 1}}">Page</router-link>
		<!-- 取参
			html取参： $route.params.id
			js取参： this.$route.params.id
		 -->


<!-- 下面的结果为 /page1?plan=hello -->
<router-link :to="{name: 'page1',query:{plan: 'hello'}}">Page</router-link>
		 <!-- 取参
			html取参： $route.query.plan
			js取参： this.$route.query.plan
		 -->

 

1.2.3 其他属性

<!-- replace属性 默认为 false  -->
<router-link to="{name: 'page1'}" replace>Page</router-link>
<!-- append 默认为 false  -->
<router-link to="{path: 'relative/path'}" append></router-link>
<!-- tag属性 默认为 a  -->
<!-- 下面渲染结果为 <li>Page</li> -->
<router-link to="{name: 'page1'}" tag="li">Page</router-link>

1. 设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。
2. 设置 append 属性后，则在当前（相对）路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b。
3. 有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。
4. active-class属性， 类型为 string，默认值: "router-link-active"，设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

2. JS函数里调用this.$router.push()

this.$router.push('/page2');
this.$router.push({path: '/page2'});
// params 只能用name
this.$router.push({name: 'page2', params: {id: 1}});
// query
this.$router.push({path: '/page2', query: {id: 1}});
this.$router.push({name: 'page2', query: {id: 1}});
// 取参方法和router-link相同

注意：针对params

1. 路由配置 path: "/page2/:id" 或者 path: "/page2:id" ,

2. // 不配置path ,第一次可请求,刷新页面id会消失

3. // 配置path,刷新页面id会保留

3. JS函数里调用this.$router.replace() 

用法同his.$router.push()一样，但是replace导航后不会留下 history 记录。点击返回会跳转到上上（注：我没多打一个上字）个页面 (就是直接替换了当前页面)

4. JS函数里调用this.$router.go(n) 

 

向前或者向后跳转n个页面，n可为正整数或负整数