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