VueRouter 学习

1,App.vue<template>
  <div id="app">
    <h1>用router-link实现跳转</h1>
    <router-link to="/">跳转到Page01</router-link>
    <router-link to="/" replace>替换到Page01</router-link>
    <router-link to="/02/123">动态路由跳转到Page02</router-link>
    <router-link :to="{ name: 'Page02', params: { id: 111 }}">动态路由跳转到Page02</router-link>
    <router-link :to="{ name: 'com03', params: { sex: '123'}, query: { name: 'hello query' }}">带参数跳转到Page03</router-link>
    <router-link to="/04">跳转到嵌套路由示例Page04</router-link>
    <router-link :to="{ path: '/05/111', query: { name: 'query', type: 'object' }}" replace>带参数替换到Page05</router-link>
    <router-link to="/04">
      <button>按钮形式的router-link跳转到Page04</button>
    </router-link>
    <h1>用JS实现跳转</h1>
    <button v-on:click="go01">Page01</button>
    <button v-on:click="go02">Page02</button>
    <button v-on:click="go03">Page03</button>
    <button v-on:click="go04">Page04</button>
    <button v-on:click="go05">Page05</button>
    <button v-on:click="back">back</button>
    <h1>界面效果</h1>
    <router-view></router-view>
  </div>
</template>

总结：通过 <router-link></router-link>   to  = "字符串"  :to="对象"

通过js来进行

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

this.$router.push({ name: 'com03', params: { sex: '7879' }, query: { name: 'jack', age: 15, sex: 'male' }})

2.router.js

import Page01 from './components/page01'
import Page02 from './components/page02'
import Page03 from './components/page03'
import Page04 from './components/page04'
import Page05 from './components/page05'

import Child01 from './components/childs/child01'
import Child02 from './components/childs/child02'

export default [
  //嵌套路由
  { path: '/', component: Page01 },
  //动态路由
  { name: 'Page02', path: '/02/:id', component: Page02 },
  //命名路由&路由传参
  { name: 'com03', path: '/03/:sex', component: Page03 },
  { path: '/04', component: Page04,
    children: [
      { name: 'child01', path: '/', component: Child01 },
      { name: 'child02', path: '/c02', component: Child02 },
    ]
  },
  { name: 'Page05', path: '/05/:txt', component: Page05 },
]

​3，main.js​

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import routes from './routes.js'

Vue.use(VueRouter)

const router = new VueRouter({
  routes
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  router
})