zoukankan      html  css  js  c++  java
  • vue-router子路由

    红色字体为增改内容!!!

    1、新建src/router.js

    2、src/main.js  

    //导入vue和新建的router.js   
    import Vue from 'vue'
    import router from './router.js'

    3、src/router.js

    //导入vue和vue-router
    import Vue from 'vue'
    import VueRouter from 'vue-router'
     
    //使用vue-router(名称为VueRouter,可以随便取)
    Vue.use(VueRouter)
     
    //定义组件模板内容
    const first = {template:'<div>这是first内容</div>'}
    const second = {template:'<div>这是second内容</div>'}
    const Home = {template:'<div>这是Home内容</div>'}
     
    const firstFirst = {template:'<div>这是firstFirst内容</div>'}
    const firstSecond = {template:'<div>这是firstSecond内容</div>'}
    const sld={
    template:`
    <div class="sld">
    <h2>二级组件</h2>
    <router-view class="abc"></router-view>
    </div>
    `
    }
    //定义组件路径
    const router = new VueRouter({
    mode:"history",
    base:__dirname,
    routes:[          //routes
    {path:"/",component:Home},
    {path:"/first",component:sld,
    children:[
    {path:"/",component:first},
    {path:"first",component:firstFirst},
    {path:"second",component:firstSecond}
    ]
    },
    {path:"/second",component:second}
    ]
    })
     
    //使用组件
    new Vue({
    router,
    template:`
    <div id="r">
    <ul>
                   //router-link to=“指向的组件路径”
    <li><router-link to="/">/</router-link></li>                 
    <li><router-link to="/first">first</router-link>
    <ul>
    <li><router-link to="/first/first">first</router-link></li>
    <li><router-link to="/first/second">second</router-link></li>
    </ul>
    </li>
    <li><router-link to="/second">second</router-link></li>
    </ul>
    <router-view class="abc"></router-view>          
           //router-view组件显示区域
    </div>
    `
    }).$mount("#app")        //组件挂载(index.html中定义的div的id为app)
     

    4、运行npm run dev,页面显示效果为

  • 相关阅读:
    《代码整洁之道》之四 注释
    《代码整洁之道》之三 函数
    《代码整洁之道》之二 有意义的命名
    《代码整洁之道》
    Hibernate学习笔记
    Struts2复习笔记
    学习Spring必学的Java基础知识
    Eclipse下搭建Maven框架
    onvif实现
    rtmp服务端实现
  • 原文地址:https://www.cnblogs.com/yijisi/p/11247804.html
Copyright © 2011-2022 走看看