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})