import Vue from 'vue'

import App from './App'

import VueRouter from 'vue-router'

import Page01 from './components/page01'

import Page02 from './components/page02'

Vue.use(VueRouter)//全局安装路由功能

//定义路径

const routes = [

  { path: '/', component: Page01 },

  { path: '/02', component: Page02 },

]

//创建路由对象

const router = new VueRouter({

  routes

})

new Vue({

  el: '#app',

  template: '<App/>',

  components: { App },

  router

})

<template>

  <div id="app">

    <router-link to="/">01</router-link>

    <router-link to="/02">02</router-link>

    <br/>

    <router-view></router-view>

  </div>

</template>

<template>

  <div>

    <h1>page01</h1>

  </div>

</template>

<template>

  <div>

    <h1>page02</h1>

  </div>

</template>

1.npm安装vue-router

2.Vue.use(VueRouter)全局安装路由功能

3.定义路径数组routes并创建路由对象router

4.将路由注入到Vue对象中

5.在根组件中使用<router-link>定义跳转路径

6.在根组件中使用<router-view>来渲染组件

7.创建子组件

<router-link to="/page01">page01</router-link>

<router-link to="/04">

    <button>to04</button>

</router-link>

// 字符串

router.push('home')

// 对象

router.push({ path: 'home' })

// 命名的路由

router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private

router.push({ path: 'register', query: { plan: 'private' }})

// 字符串

this.$router.push('home')

// 对象

this.$router.push({ path: 'home' })

// 命名的路由

this.$router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private

this.$router.push({ path: 'register', query: { plan: 'private' }})

<router-link to="/05" replace>05</router-link>

this.$router.replace({ path: '/05' })

// 在浏览器记录中前进一步，等同于 history.forward()

this.$router.go(1)

// 后退一步记录，等同于 history.back()

this.$router.go(-1)

// 前进 3 步记录router.go(3)

// 如果 history 记录不够用，那就默默地失败呗

this.$router.go(-100)

this.$router.go(100)

watch: {

  '$route' (to, from) {

      console.log(to);

      console.log(from);

  },

},

{

    ...

    params: { id: '123' },

    query: { name: 'jack' },

    ...

}

1. params

params传递的数据可用于匹配动态路由字段。如params的数据为 params: { abc: 'hello', txt: 'world' } 而动态路由路径为 path: '/05/:txt 那么最终的路径就会是 /05/world。所以，动态路由其实就是一种params的传递方式。

注意：由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效！需要用name来指定页面。之后动态路由会从params中找到动态路由同名的数据。

传递数据

在路由配置文件中定义参数

export default [

    ...

    { name: 'Page05', path: '/05/:txt', component: Page05 },

]

下面有两种传递params的方式

1. 通过path传递

路径后面的/:txt就是我们要传递的参数。

this.$router.push({ path: '/05/441'})

此时路由跳转的路径

http://localhost:8080/#/05/441

此时我们看到查看路由信息对象：

{

    ...

    params: {

        txt: '441'

    }

    ...

}

2. 通过params传递

this.$router.replace({

    name: 'Page05',

    params: { abc: 'hello', txt: 'world' },

    query: { name: 'query', type: 'object' }

})

通过name获取页面，传递params和query。
得到的URL为

http://localhost:8080/#/05/world?name=query&type=object

而获取到的参数为

{

    ...

    params: {

        abc: "hello",

        txt: "world"

    }

    ...

}

获取数据

template

<h2> {{ $route.params.txt }} </h2>

script

console.log(this.$route.params.txt)

3. query

query传递数据的方式就是URL常见的查询参数，如/foo?user=1&name=2&age=3。很好理解，下面就简单写一下用法以及结果

传递数据

template

<router-link :to="{ path: '/05', query: { name: 'query', type: 'object' }}" replace>05</router-link>

script

this.$router.replace({ path: '/05', query: { name: 'query', type: 'object' }})

路径结果

http://localhost:8080/#/05?name=query&type=object

路由信息对象

{

    ...

    query: {

        name: "query",

        type: "object"

    }

    ...

}

获取数据

获取数据和params是一样的。
template

<h2> {{ $route.query.name }} </h2>

script

console.log(this.$route.query.type)

.