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

一、使用脚手架搭建项目

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

二、引入bootstrap样式库

在index.html中引入

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

三、引入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/>'
});

各组价如下

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">&nbsp; 我的博客</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>

四、效果