vue-router小试验

vue-router小试验

• 组件分为路由组件和一般组件：路由组件一般放在pages文件夹里面，就是 <router-link></router-link> <router-view></router-view> 这种的。一般组件一般放在components文件夹里面，就是 <Banner /> 这种的。pages文件夹在src目录下。
• 结合构思的项目，把路由组件展示出来了：
  
• 还可以设置二级路由：
  
• 记录一下代码，继续前进 App.vue

<template>
  <div id="app">
    <i class="el-icon-s-home"></i>
    <!-- <p>App的内容</p> -->
    <!-- 这种是一般组件，一般放在components文件夹里面 -->
    <Home />
    <div style="height:300px;width:300px;background-color: palevioletred;">
      <p>在这里显示导航</p>
      <hr>
      <!-- 这种是路由组件，一般放在pages文件夹里面 -->
      <!-- vue中通过router-link标签实现路由的切换 -->
      <router-link :to="{name:'newword'}">word</router-link><br>
      <router-link to="/todo">todo</router-link><br>
      <router-link to="/note">note</router-link><br>
      <router-link to="/article">article</router-link><br>
      <router-link to="/video">video</router-link><br>
      <router-link to="/shop">shop</router-link><br>
      <router-link to="/photograph">photograph</router-link><br>
      <router-link to="/music">music</router-link><br>
    </div>
    <div style="height:300px;width:300px;background-color: aquamarine;">
      <p>在这里显示内容</p>
      <hr>
      <!-- 指定组件的呈现位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// 引入组件
import Home from './components/Home'
import Word from './pages/Word'
import Todo from './pages/Todo'
import Note from './pages/Note'
import Article from './pages/Article'
import Video from './pages/Video'
import Shop from './pages/Shop'
import Photograph from './pages/Photograph'
import Music from './pages/Music'
import User from './pages/User'
import Power from './pages/Power'
import Goods from './pages/Goods'
import Order from './pages/Order'

export default {
  name: 'App',
  // 注册组件
  components: {
    Home,
    Word,
    Todo,
    Note,
    Article,
    Video,
    Shop,
    Photograph,
    Music,
    User,
    Power,
    Goods,
    Order
  }
}
</script>

<style>
</style>

Shop.vue

<template>
  <div>
    <p>Shop组件的内容</p>
    <div style="height: auto; width: 300px; background-color: pink">
      <p>在这里显示导航</p>
      <!-- 此处要带上父组件的路由 -->
      <router-link to="/shop/user">user</router-link><br>
      <router-link to="/shop/power">power</router-link><br>
      <router-link to="/shop/goods">goods</router-link><br>
      <router-link to="/shop/order">order</router-link><br>
    </div>
    <div style="height: auto; width: 300px; background-color: lightblue">
      <p>在这里显示内容</p>
      <!-- 指定组件的呈现位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "Shop",
};
</script>

<style scoped>
</style>

router/index.js

// 该文件专门用于插件整个应用的路由器

import VueRouter from "vue-router";

// 引入组件
import Home from '../components/Home'
import Word from '../pages/Word'
import Todo from '../pages/Todo'
import Note from '../pages/Note'
import Article from '../pages/Article'
import Video from '../pages/Video'
import Shop from '../pages/Shop'
import Photograph from '../pages/Photograph'
import Music from '../pages/Music'
import User from '../pages/User'
import Power from '../pages/Power'
import Goods from '../pages/Goods'
import Order from '../pages/Order'

// 创建并暴露一个路由器
export default new VueRouter({
    routes:[
        // 一级路由
        {
            path:'/home',
            component:Home
        },
        {
            name:'newword',
            path:'/word',
            component:Word
        },
        {
            path:'/todo',
            component:Todo
        },
        {
            path:'/note',
            component:Note
        },
        {
            path:'/article',
            component:Article
        },
        {
            path:'/video',
            component:Video
        },
        {
            path:'/shop',
            component:Shop,
            // 二级路由
            children:[
                {
                    path:'user', // 不用写斜杠了
                    component:User,
                },
                {
                    path:'power',
                    component:Power,
                },
                {
                    path:'goods',
                    component:Goods,
                },
                {
                    path:'order',
                    component:Order,
                }
            ]
        },
        {
            path:'/photograph',
            component:Photograph
        },
        {
            path:'/music',
            component:Music
        }
    ]
})

• 但是这样一个一个写真的好麻烦，要是我会遍历和写后台的路由的列表就好了。

总结

• 也许越博学的人越认识到自己的渺小。