App.vue
<template> <div id="app"> 这是app.vue主页标题 <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
router文件夹下的index.js
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Learn from '@/components/learn' import Page from '@/components/page' Vue.use(Router) export default new Router({ routes: [ { path: '/', //根路径 name: 'HelloWorld', component: HelloWorld }, { path: '/learn', name: 'learn', component: Learn, children: [{ path: '/page', //子路由配置 name:'page', component: Page, } ] } ] })
HelloWorld路由页面
<template> <div class="hello"> <h4>{{ msg }}</h4> <h4>我是HelloWorld页面</h4> <router-link to="/learn">我是路由,点我跳转二级路由页面</router-link> </br> </br> <a @click="gopage">用js跳转learn页面</a> </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: '这是嵌入app.vue主页面的第一级的router页面' } }, methods:{ gopage(){ //跳转到上一次的页面 //this.$router.go(-1) //指定跳转的地址 //this.$router.replace('/learn') //指定跳转路由的名字下 //this.$router.replace({name:'learn'}) //通过push进行跳转 //this.$router.push("/learn"); this.$router.push({name:'learn'}) } } } </script> <style scoped> h3 { font-weight: normal; color:blue; } a{ color:#42b983; } </style>
learn路由页面
<template> <div class="learn"> <h3>{{ msg }}</h3> <h3>我是learn页</h3> <router-link to="/page">我是路由,点我跳转子页面</router-link> <router-view/> </div> </template> <script> export default { name: 'learn', data () { return { msg: '我是指定跳转的地址router页面' } } } </script> <style scoped> h3 { font-weight: normal; color: #42b983; } </style>
learn下的子路由page页面
<template> <div class="page"> <h3>{{ msg }}</h3> <h3>我是page页面</h3> </div> </template> <script> export default { name: 'page', data () { return { msg: '我是嵌入的子页面' } } } </script> <style scoped> h3 { font-weight: normal; color: #42b983; } </style>