vue学习四 vue-router实现简单路由（博客系统框架）

亦凉 2022-01-28 03:23 79阅读 0赞

# 一、使用脚手架搭建项目 #

前面的博客已作了叙述，可以看看以前的博客。

# 二、引入bootstrap样式库 #

在index.html中引入

# 三、引入vue-router路由 #

### 1.在main.js中声明路由 ###

import Vue from 'vue'
    import App from './App'
    import Home from './components/Home'
    import VueRouter from 'vue-router'
    import Menu from './components/Menu'
    import Manager from './components/Manager'
    import About from './components/About'
    import Login from './components/Login'
    import Register from './components/Register'
    
    Vue.config.productionTip = false;
    Vue.use(VueRouter);
    
    const routes = [
      {path:"/",component:Home},
      {path:"/menu",component:Menu},
      {path:"/about",component:About},
      {path:"/manager",component:Manager},
      {path:"/login",component:Login},
      {path:"/register",component:Register}
    ];
    
    const router = new VueRouter({
      routes,
      mode:'history'
    });
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    });

各组价如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B5Y2hhcm1fdQ_size_16_color_FFFFFF_t_70][]

### 2、使用header创建导航 ###

在header.vue中如下

<template>
        <div>
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="py-2" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
            </a>
            <a href="/" class="navbar-brand">  我的博客</a>
            <ul class="navbar-nav">
              <li> <router-link to="/" class="nav-link"> 主页</router-link></li>
              <li> <router-link to="/menu" class="nav-link"> 菜单</router-link></li>
              <li> <router-link to="/manager" class="nav-link"> 管理</router-link></li>
              <li> <router-link to="/about" class="nav-link"> 关于</router-link></li>
            </ul>
    
            <ul class="navbar-nav ml-auto">
              <li> <router-link to="/login" class="nav-link"> 登陆</router-link></li>
              <li> <router-link to="/register" class="nav-link"> 注册</router-link></li>
              </ul>
          </nav>
        </div>
    </template>
    
    <script>
        export default {
            name: "Header"
        }
    
    </script>
    
    <style scoped>
    
    </style>

### 3、在app.vue中引入header及路由模块 ###

<template>
      <div id="app">
        <div class="container">
          <AppHeader></AppHeader>
        </div>
    
        <div class="container">
          <router-view></router-view>
        </div>
    
      </div>
    </template>
    
    <script>
      import Header from "./components/Header"
    
    export default {
      components:{
        "AppHeader":Header
      }
    }
    </script>
    
    <style>
    
    </style>

# 四、效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B5Y2hhcm1fdQ_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B5Y2hhcm1fdQ_size_16_color_FFFFFF_t_70]: /images/20220128/f9d40f7b0aa541e8a92bc86ca3b6be47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B5Y2hhcm1fdQ_size_16_color_FFFFFF_t_70 1]: /images/20220128/4334f29e7e9a48a19972c457acdc9cb5.png