一、使用脚手架搭建项目
前面的博客已作了叙述,可以看看以前的博客。
二、引入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"> 我的博客</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>
四、效果
今天的文章vue学习四 vue-router实现简单路由(博客系统框架)分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/11183.html