介绍
路由：控制组件之间的跳转，不会实现请求、不用页面刷新，直接跳转-切换组件》》》
安装
本地环境安装路由插件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是自定义的名字，这里叫这个名字后，下边都要用到的
- 使用/注册：
Vue.use(Router)
- 配置
配置路由：
export default new Router({
routes: [
{
path : ‘/’, //到时候地址栏会显示的路径
name : ‘Home’,
component : Home // Home是组件的名字，这个路由对应跳转到的组件。。注意component没有加“s”.
},
{
path : ‘/content’,
name : ‘Content’,
component : Content
}
],
mode: "history"
})
- 引入路由对应的组件地址：
import Home from '@/components/Home'
import Home from '@/components/Content'
- 在main.js中调用index.js的配置：
import router from './router'
- App.vue页面使用（展示）路由：
把这个标签放到对应位置：
<router-view></router-view>
- 路由切换（原来的<a href=”XXX.html”>等地方）：把切换标签和链接改成：
<router-link to="/">切换到Home组件</router-link>
<router-link to="/content">切换到Content组件</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 router from './router'
import VueResource from 'vue-resource'//从node_modules里边把vue-resource引入进来，同引入vue文件和引入vue-router一个道理
Vue.config.productionTip = false;
Vue.use(VueResource)
//这样以后，就可以在任何组件页面中使用http了
/* 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 Home from '@/components/Home'
import Content from '@/components/Content'
import About from '@/components/About'
import Submit from '@/components/Submit'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/content',
name: 'Content',
component: Content
},
{
path: '/about',
name: 'About',
component: About
},
{
path: '/submit',
name: 'Submit',
component: Submit
}
],
mode: "history"//干掉地址栏里边的#号键
})
src/router/index.js(router的主要配置文件)
App.vue 展示Vue
<template>
<div id="app">
<app-header></app-header>
<app-nav></app-nav>
<!-- 展示router -->
<router-view></router-view>
<app-footer></app-footer>
</div>
</template>
<script>
import Header from './components/Header'
import Footer from './components/Footer'
import Navbar from './components/Navbar'
export default {
name: 'app',
data () {
return {
}
},
components: {//局部注册组件这里，可能会定义多个组件，所以component这个单词加上“s”
"app-header": Header,
"app-footer": Footer,
'app-nav': Navbar
}
}
</script>
<style>
</style>
App.vue 的router-view 标签
导航页面的路由链接设置，用于切换组件
<template>
<nav class="app-nav">
<ul class="ul-father">
<li class="li-father" v-for="item in arr" v-on:mouseover="item.show = ! item.show" v-on:mouseout="item.show = ! item.show" v-bind:class="{bgchange: item.show}">
<!-- 路由切换组件 -->
<router-link v-bind:to="item.url">
{{ item.title }}
</router-link>
<template v-if="item.value">
<ul class="ul-child" v-show="item.show">
<li class="li-child" v-for="x in item.value">
<a href="javascript:;">
{{ x }}
</a>
</li>
</ul>
</template>
</li>
</ul>
</nav>
</template>
<script>
export default {
name: "app-nav",
data (){
return {
arr: [
{
title: "首页",
value: ["一","二","三","四"],
url: "/",
show: false
},
{
title: "新闻" ,
value: ["二","二","三","四"],
url: "/content",
show: false
},
{
title: "关于",
url: "/about"
},
{
title: "投稿",
url: "/submit"
}
]
}
}
}
</script>
<style scoped>
.app-nav{
margin-bottom: 20px;
}
ul.ul-father {
background: Lightgreen;
margin: 0;
}
.li-father {
position: relative;
display: inline-block;
width: 20%;
margin: 0;
}
li a {
display: block;
padding: 15px 0;
color: #333;
text-decoration: none;
}
li a:hover,.bgchange>a{
color: #fff;
background: #222;
}
.ul-child{
position: absolute;
top: 51px;
left: 0;
width: 100%;
background: Lightgreen;
}
</style>
NavBar.Vue页面，主要用于页面切换的导航组件
博主：xing.org1^
出处：http://www.cnblogs.com/padding1015/
网友评论