例子
- route引入
import Vue from "vue"; //引入
import VueRouter from "vue-router";
import routes from
"./routers/router.js";
- router.js
import A from "../viwe/a.vue";
import B from "../viwe/b.vue";
import C from "../viwe/c.vue";
import D from "../viwe/d.vue";
import E from "../viwe/e.vue";
import F from "../viwe/f.vue";
import J from "../viwe/j.vue";
const routes = [
{
path:"/",
component:A,
redirect:"index", //重定向 首页
children:[ //子路由 大多数情况下app或pc项目都有公有的footer或header
{path:"A",component:A}, // 所以设一个公有的路由入口 将需要使用这些公有组件的放在一起
{path:"B",component: B},
{path:"C/:id",component: C,name:"c"}, //命名路由 设置传参
{path:"C",component:C},
]
},
{ //其他系列的路由
path:"/e",component:E
},
......// 其他路由
];
export default routes;
- template设置
嵌套路由：
<div id="content">
<nav>
<router-link to="/a" tag="li">A</router-link>
<router-link to="/b" tag="li">B</router-link>
<router-link to="/c" tag="li">C</router-link>
</nav>
<router-view></router-view>
</div>
- 路由跳转及传参
this.$router.push({name:"C",params:{id:id}})
