介绍
路由:控制组件之间的跳转,不会实现请求、不用页面刷新,直接跳转-切换组件》》》
安装
本地环境安装路由插件vue-router: cnpm install vue-router --save-dev
*没有安装淘宝镜像的可以将 cnpm 替换成 npm
想要安装的可以看这篇文章http://www.cnblogs.com/padding1015/p/7162024.html,(打开搜索 镜像 即可跳转到对应位置)
配置
两种配置方法:在main.js中 || 在src/router文件夹下的index.js中
这里只说在src/router/index.js中的
1.引入:
import Vue from 'vue'
import Router from 'vue-router'
注意这个Router是自定义的名字,这里叫这个名字后,下边都要用到的
2. 使用/注册:
Vue.use(Router); |
3. 配置
配置路由:
export default new Router({ routes: [{ path: '/', component: Customers }, { path: '/about', component: About } ], mode: "history" }) |
4. 引入路由对应的组件地址:
|
|
5. 在main.js中调用index.js的配置:
import router from './router' |
6. App.vue页面使用(展示)路由:<!-- 展示router -->
把这个标签放到对应位置:
<router-view></router-view> |
7. 路由切换(原来的<a href=”XXX.html”>等地方):把切换标签和链接改成:
<router-link to="/" class="navbar-brand" >首页</router-link> <router-link to="/About" class="navbar-brand">关于我们</router-link> |
//这里,to里边的参数和配置时,path的路径一样即可
贴一个源码:
main.js
// 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 $ from 'jquery'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'
import router from './router'
import VueResource from 'vue-resource' //从node_modules里边把vue-resource引入进来,同引入vue文件和引入vue-router一个道理
Vue.config.productionTip = false
//这样以后,就可以在任何组件页面中使用http了
Vue.use(VueResource)
/* eslint-disable no-new */
new Vue({
el: '#app',
router, //引用router
template: '<App/>',
components: { App }
})
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Customers from '@/components/Customers'
import About from '@/components/About'
//使用注册
Vue.use(Router);
export default new Router({
routes: [{
path: '/',
component: Customers
},
{
path: '/about',
component: About
}
],
mode: "history"
})
App.vue 展示Vue
<template>
<div id="app">
<Nav></Nav>
<!-- 展示rooter -->
<router-view></router-view>
</div>
</template>
<script>
import Nav from './components/Nav'
export default {
name: 'App',
components: {
Nav
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Nav.vue,导航页面的路由链接设置,用于切换组件
<template>
<div>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">用户管理系统</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<router-link to="/" class="navbar-brand" >首页</router-link>
</li>
<li class="nav-item">
<router-link to="/About" class="navbar-brand">关于我们</router-link>
</li>
</ul>
</div>
</nav>
</div>
</template>
<script>
export default {
name: "Nav",
data() {
return {
}
}
}
</script>
<style>
</style>