路由跳转 – 超链接体式格局跳转

html：

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 运用 router-link 组件来导航. -->
        <!-- 经由过程传入 `to` 属性指定链接. -->
        <!-- <router-link> 默许会被衬着成一个 `<a>` 标签 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将衬着在这里 -->
    <router-view></router-view>
</div>

router.js：

import Vue from 'vue';
import vueRouter from 'vue-router';
Vue.use(vueRouter);
// 0. 假如运用模块化机制编程，导入Vue和VueRouter，要挪用 Vue.use(VueRouter)
 
// 1. 定义（路由）组件。
// 也能够从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
 
// 2. 定义路由
// 每一个路由应当映照一个组件。 个中"component" 能够是
// 经由过程 Vue.extend() 建立的组件组织器，
// 或许，只是一个组件设置对象。
const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
]
 
// 3. 建立 router 实例，然后传 `routes` 设置
// 你还能够传别的设置参数, 不过先这么简朴着吧。
const router = new VueRouter({
    routes // （缩写）相当于 routes: routes
})
 
// 4. 建立和挂载根实例。
// 记得要经由过程 router 设置参数注入路由，
// 从而让全部运用都有路由功用
const app = new Vue({
    router
}).$mount('#app')
 

export default router

路由跳转 – 函数要领跳转

this.$router.push();

query体式格局传参和吸收参数

//query要领传值
this.$router.push({path : '/xxx', query : { data }})
//query要领取值
this.$route.query.data

注重:传参是this.$router,吸收参数是this.$rout

params体式格局传参和吸收参数

//params要领传值
this.$router.push({name : 'xxx', params : { data }})
//params取值
this.$route.params.data

注重:params传参，push内里只能是 name:’xxxx’,不能是path:’/xxx’

区分：直白的来讲query相当于get要求，页面跳转的时刻，能够在地址栏看到要求参数，而params相当于post要求，参数不会再地址栏中显现

拓展：this.$router 和this.$route有何区分？

1.$router为VueRouter实例，想要导航到差别URL，则运用$router.push要领
2.$route为当前router跳转对象，内里能够猎取name、path、query、params等

注重： 运用query体式格局传值革新页面后参数不会丧失，运用params体式格局传值，参数会丧失，运用时须要衡量