路由index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Me from '../views/me.vue'
import About from "../views/About.vue"
import Centor from "@/views/Center.vue"
import _404 from "../views/404.vue"Vue.use(VueRouter)const routes = [{path: '/',name: 'Home',alias:"/index", //别名 访问 /index也是访问 Home组件component: Home,},{path:'*', //未找到视图则跳转404 name:'404',component: _404},{path:"/s", redirect:"/me/20" //重定向},{path: '/about/:userId',name: 'About',component: About},{path:"/me/:id",component:Me},{path:"/me",name:'Me',component: Me,children:[ //子路由 {path:"center", // /me/:id/center component:Centor //在对应路径下 显示在 Me组件的routerView中},]},{path: "/all",// 命名视图 在router-view name属性中指明名字components:{h:Home,a:About,m:Me}}
]const router = new VueRouter({routes,mode:"history" //去除 路径中的/#/
})export default routerApp.vue
<template><div id="app"><div class="left"><div><router-link to="/">主页</router-link> </div><!-- 类似与rustful风格 传递参数 参数在路由中定义 --><div><router-link :to="'/about/'+userId">关于</router-link></div><!-- 命名路由 name 就是在router中注册的路由名称，parames就是需要传递的传输 --><div><router-link :to="{name:'Me',params:{id:20}}" >个人</router-link></div><!-- 这个是命名视图显示所有的组件 与下面的视图 h、a、m 一起的--><div><router-link to="/all" >所有</router-link></div></div><router-view class="content" ></router-view><!-- 命名视图 --><router-view name="h"></router-view><router-view name="a"></router-view><router-view name="m"></router-view></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld},data() {return {userId:10}},
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;display: flex;justify-content: flex-start;align-items: flex-start;
}
.left>div{width: 100px;height: 10vh;display: flex;justify-content: center;align-items: center;
}
.left{background-color: #000;height: 100vh;
}
a{color: #999999;text-decoration: none;}
a:hover{color: pink;
}.content{width: 80vw;
}
</style>me.vue
<template><div><h1>个人信息</h1><!-- $route.params.id 可以获取路由路径的值 url /me/10 ==> /me/:id --><h1>{{$route.params.id}}</h1><!-- 显示子路由的内容 --><router-view></router-view>
</div>
</template><script>
export default {name:"me",data() {return {}},props:{},data() {return {}},}
</script><style></style>
404.vue
<template><div><h1>未找到页面，404</h1></div>
</template><script>
export default {}
</script><style></style>
其他的页面也类似
