https://github.com/zhanglingn... github链接地址
https://router.vuejs.org/zh-c... vue-router 官方地址
安装vue-router 路由
npm install vue-router
如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:可以通过第二步/第三步的方式安装加载
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
编写 路由地址文件 (./router/index.js)
import Vue from 'vue'
import Router from 'vue-router'
// 1. 定义(路由)组件。
import demo01 from '../components/demo01/demo01'
import demo02 from '../components/demo02/demo02'
import demo03 from '../components/demo03/demo03'
import demo04 from '../components/demo04/demo04'
import demo05 from '../components/demo05/demo05'
Vue.use(Router)
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
export default new Router({
routes: [
{
path: '/',
name: 'demo01',
component: demo01
},
{
path: '/demo01',
name: 'demo01',
component: demo01
},
{
path: '/demo02',
name: 'demo02',
component: demo02
},
{
path: '/demo03',
name: 'demo03',
component: demo03
},
{
path: '/demo04',
name: 'demo04',
component: demo04
},
{
path: '/demo05',
name: 'demo05',
component: demo05
},
]
})
main.js 中引入并注册router
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
//引入组件Header,并组册为全局组件
import Header from './assets/header/header.vue';
Vue.component('Header',Header)
//引入vue-router,并在new Vue 中安装加载
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {
App
},
template: '<App/>'
})
编写视图入口:
在app.vue中不在直接引入独立的文件组件,而是把文件变成一个新的起始出口,通过路由匹配到的组件将渲染在这里,在这里需要理解<router-link/><router-view>两个标签的具体含义,一个入口,一个出口,我们把页面分为两个部分,左侧是入口,右侧是出口
<template>
<div id="app">
<!--第三步 在template 中渲染组件-->
<!-- <Demo01/>
<hr>
<Demo02/>
<hr>
<Demo03/>
<hr> -->
<!-- <Demo04/> -->
<!-- <Demo05/> -->
<Header/>
<div class="container">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<ul class="app_left">
<li v-for="(item) in linkList" :key="item.routerName">
<router-link :to="{ name: item.routerName }">Go to {{item.routerName}}</router-link>
</li>
</ul>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<div class="app_right">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
//第一步 引入Demo01 组件
// import Demo01 from './components/demo01/demo01'
// import Demo02 from './components/demo02/demo02'
// import Demo03 from './components/demo03/demo03'
// import Demo04 from './components/demo04/demo04'
// import Demo05 from './components/demo05/demo05'
export default {
name: 'App',
data() {
return {
linkList: [{
routerName: 'demo01',
name: 'demo01'
},
{
routerName: 'demo02',
name: 'demo02'
},
{
routerName: 'demo03',
name: 'demo03'
},
{
routerName: 'demo04',
name: 'demo04'
},
{
routerName: 'demo05',
name: 'demo05'
},
]
};
},
//第二步 在components 中注册组件
components: {
// Demo01,
// Demo02,
// Demo03,
// Demo04,
// Demo05
}
}
</script>
<style lang="less">
.app_left {
width: 300px;
float: left;
border: 1px solid #000000;
height: 600px;
li {
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
border-bottom: 1px solid #000000;
}
}
.app_right {
width: calc(100% - 400px);
float: right;
}
</style>
这样一个基础的路由就写好啦,可以去github上下载查看,持续更新中,有问题联系 zhanglnb@seentao.com
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。