美文网首页前端部分
(二)Vue-router 配置子路由

(二)Vue-router 配置子路由

作者: 我拥抱着我的未来 | 来源:发表于2018-02-17 17:41 被阅读0次

    本节知识点

    • 子路由就是比如从列表页跳转到文章页,路径是/hi/hi1这个样子的。

    实现子路由

    • 首先第一步在components文件夹下面创建2个文件,起名叫做Hi1.vue另外一个叫做Hi2.vue

    Hi1.vue

    <template>
        <div class="text1">
          {{message1}}
        </div>
    </template>
    
    <script type="text/ecmascript-6">
        export default {
          name:"Hi1",
          data(){
            return {
              message1:"这个就是Hi1页面"
            }
          }
        }
    </script>
    
    <style scoped>
      .text1{
        font-size:46px;
        color:red;
      }
    </style>
    
    

    Hi2.vue

    <template>
        <div class="text2">
          {{message2}}
        </div>
    </template>
    
    <script type="text/ecmascript-6">
        export default {
          name:"Hi2",
          data(){
             return {
               message2:"这个就是Hi2页面"
             }
          }
        }
    </script>
    
    <style scoped>
      .text2{
        font-size:46px;
        color:red;
      }
    </style>
    
    

    特别注意的就是要是css或者JS文件太多的话可以独立出来格式就是

    <style src="../assets/css2.css"></style>
    <script src="xxxx"></script>
    
    • 第二步在app.vue里面写好链接
      <router-link to="/hi/hi1">跳转到hi页面下面的hi1</router-link>
       <router-link to="/hi/hi2">跳转到hi页面下面的hi2</router-link>
    
    • 第三步 重点写路由 index.js

    首先需要引入两个组件

    import Hi1 from '@/components/Hi1'
    import Hi2 from '@/components/Hi2'
    

    然后配置路由 简单来说就是加个children属性,这里千万注意了路径前面不要写/,然后在配置组件

      {
          path:'/hi',
          name:"Hi",
          component:Hi,
          children:[
            {path:"/",component:Hi,name:"Hi"},
            {path:"hi1",component:Hi1,name:"Hi1"},
            {path:"hi2",component:Hi2,name:"Hi2"},
          ]
        }
    
    
    • 第四部在 hi.vue下面加入 这样就把hi.vue打造成了一个父页面了
    <router-view></router-view>
    

    特别注意的就是模板文件里面必须要有包裹层否则router-view出不来

    <template>
        <div>
        <div class="hello">
            {{msg}}
        </div>
      <router-view></router-view>
        </div>
    </template>
    

    相关文章

      网友评论

        本文标题:(二)Vue-router 配置子路由

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