vue-route

官网: https://router.vuejs.org/

例子

  • route设置
  1. route引入
import Vue from "vue";  //引入
import VueRouter from "vue-router";
import routes from 
"./routers/router.js";
  1. 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;
  1. 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>
  1. 路由跳转及传参
this.$router.push({name:"C",params:{id:id}})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 读的什么书:《亲密关系——通往灵魂的桥梁》 阅读有效时间:30分钟 阅读中遇到了什么困难:今天暂时没有 阅读有什么...
    玉虹阅读 1,267评论 0 0
  • 文/ 陈皓 有条路很宽很长 芳草摇曳,鲜红盛开 两行翠柏绿松笔直而上 在一个春雨绵绵的季节 我沿着长长的台阶 庄严...
    沂蒙文学阅读 2,967评论 1 3
  • 在使用Animate CC 导入PSD的时候,如果直接默认确认,导入的PNG图都会以PNG8的格式被导入,各种杂边...
    Hillgo阅读 7,370评论 0 2