vue-route

作者: 小小一小只 | 来源:发表于2017-09-05 11:59 被阅读0次

    官网: 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}})
    

    相关文章

      网友评论

          本文标题:vue-route

          本文链接:https://www.haomeiwen.com/subject/omjujxtx.html