Vue学习笔记进阶篇之vue-router安装及使用方法
介绍
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
本文是基于上一篇文章（）vue-cli脚手架工具的。
安装
在终端通过cd命令进入到上一篇文章中创建的my-demo1项目目录里，然后使用以下命令进行安装:
npm install vue-router --save
--save参数的作用是在我们的包配置文件package.json文件中添加对应的配置。安装成功后， 可以查看package.json文件，你会发现多了"vue-router": "^2.7.0"的配置。如下
"dependencies": {
"vue": "^2.3.3",
"vue-router": "^2.7.0"
},
使用
通过以上步骤，我们已经安装好了vue-router，在vue-cli中我们如何使用呢？
，我们需要在main.js文件中导入并注册vue-router:
//ES6语法导入 import VueRouter from 'vue-router' //注册 Vue.use(VueRouter)
然后便是实例化
const router = new VueRouter({
mode: 'history',
routes:[
{path: '/', ponent:DemoHome},
{path: '/about', ponent:DemoAbout},
{path: '/contact', ponent:DemoContact}
]
})
path: 是路由的路径。
ponent: 是该路由需要渲染的组件。
上面代码中的DemoHome, DemoAbout, DemoContact都是单文件组件，所以我们同样需要创建上面三个组件，并导入到当前文件。这三个组件我们只是作为示例来使用，所以比较简单，代码分别如下:
DemoHome.vue:
<template>
<div id="home">
<h2>this is home</h2>
</div>
</template>
<script>
export default({
name:'home'
})
</script>
<style scoped>
#home{
width: 100%;
height: 500px;
background-color: khaki;
}
</style>
DemoAbout.vue:
<template>
<div id="about">
<h2>this is about</h2>
</div>
</template>
<script>
export default({
name:'about'
})
</script>
<style scoped>
#about{
width: 100%;
height: 500px;
background-color: antiquewhite;
}
</style>
DemoContact.vue:
<template>
<div id="contact">
<h2>this is contact</h2>
</div>
</template>
<script>
export default({
name:'contact'
})
</script>
<style scoped>
#contact{
width: 100%;
height: 500px;
background-color: lightskyblue;
}
</style>
创建好以上组件后，再使用ES6语法导入到main.js:
import DemoHome from './ponents/DemoHome' import DemoAbout from './ponents/DemoAbout' import DemoContact from './ponents/DemoContact'
在Vue实例中加入路由属性就可以了
new Vue({
el: '#app',
router,
template: '<App/>',
ponents: { App }
})
完整的main.js应该是这样
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import DemoHome from './ponents/DemoHome'
import DemoAbout from './ponents/DemoAbout'
import DemoContact from './ponents/DemoContact'
Vue.use(VueRouter)
Vue.config.productionTip = false
const router = new VueRouter({
mode: 'history',
routes:[
{path: '/', ponent:DemoHome},
{path: '/about', ponent:DemoAbout},
{path: '/contact', ponent:DemoContact}
]
})
/ eslint-disable no-new /
new Vue({
el: '#app',
router,
template: '<App/>',
ponents: { App }
})
在这里我们为了学习，所以我们简单的做个布局。接下来，我会再创建两个组件，一个叫DemoHeader, 一个叫DemoFooter。DemoHeader里面我放一个logo的图片，和导航，而这个导航的路由也将会使用我们前面定义的路由；DemoFooter就比较简单了，放一些footer信息。
狼蚁网站SEO优化我们看下这两个组件的代码
DemoHeader.vue:
<template>
<div id="header" class="wrap">
<div class="header">
<h1 class="logo">
<router-link to="/">
</router-link>
</h1>
</div>
<div class="-nav">
<div id="navList" class="navlist-wrap">
<div class="navlist clearfix">
<span class="nav-btn">
<router-link to="/">首页</router-link>
</span>
<span class="nav-btn">
<router-link to="/about">关于</router-link>
</span>
<span class="nav-btn">
<router-link to="/contact">联系方式</router-link>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default({
name:'header',
data:function () {
return {
'nav-btn': 'nav-btn'
}
}
})
</script>
<style scoped>
.header{width:1105px;margin:0 auto;height:111px;padding:12px 0 18px;position:relative;z-index:1}
.header .logo{height:86px;width:256px;margin-:25px}
.-nav .navlist-wrap{width:1050px;margin:0 auto;position:relative}
.-nav .navlist{position:absolute;right:130PX;:-40PX}
.-nav .navlist .nav-btn
{
float:left;
margin-left:60px;
color:#666;
vertical-align: middle;
text-decoration:none;
font-size: large;
}
</style>
在上面的代码中，我们看到了一个陌生的标签，<router-link>这个是什么玩意呢？其实他就是vue-router集成的一个组件，渲染出来的是一个<a>标签。而他的属性to其实就是一个props属性，这里面的意思就是路由的路径，与前面定义的路由path对应。关于router-link的更多介绍可以看官网
DemoFooter.vue:
<template>
<div id="footer">
<span>Copyright © <a href="http://.chairis." rel="external nofollow" >Chain</a>. All rights reserved</span>
</div>
</template>
<script>
export default({
name:'footer'
})
</script>
<style scoped>
#footer
{
height:50px;
position:fixed;
bottom:0px;
left: 0px;
background-color: #eeeeee;
width: 100%;
padding-: 10px;
}
</style>
我们的组件都已经创建好了，接下来的事情就是把他们组合到一起。这个组合，我们就用App.vue来实现吧。
先整理下我们的思路啊
在我们的页面上，我们需要把DemoHeader, DemoFooter放进去，而我们的DemoHeader里面定义了导航，我们希望把导航出来的组件放到header和footer之间。所以大致应该是这个样组合
<demo-header></demo-header>
<!-- 根据路由显示的组件 -->
<!-- TO DO -->
<demo-footer></demo-footer>
狼蚁网站SEO优化看下完整的代码吧
<template>
<div id="app">
<demo-header></demo-header>
<router-view></router-view>
<demo-footer></demo-footer>
</div>
</template>
<script>
import DemoHeader from './ponents/DemoHeader'
import DemoFooter from './ponents/DemoFooter'
export default {
name: 'app',
ponents: {
DemoHeader,
DemoFooter
}
}
</script>
<style>
#app {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
background-color: aliceblue;
}
</style>
同样的道理，我们要是想使用一个组件，导入和注册的步骤是少不了的。
导入
import DemoHeader from './ponents/DemoHeader' import DemoFooter from './ponents/DemoFooter'
注册
ponents: {
DemoHeader,
DemoFooter
}
在上面的代码中我们又发现了个陌生标签<router-view>这个标签同样是vue-router的一个内部组件，实际上它是一个是一个 functional 组件。具体信息可以去官网router-viewAPI文档详细了解。它的作用就是渲染路由导航过来的组件，也就是这个标签内就是我们放置DemoHome, DemoAbout, DemoContact的地方。
因为它也是个组件，所以可以配合 <transition> 和 <keep-alive> 使用。如果两个结合一起用，要确保在内层使用 <keep-alive>, 添加上述两个标签后的template代码如下
<template>
<div id="app">
<demo-header></demo-header>
<transition name="fade" mode="out-in">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
<demo-footer></demo-footer>
</div>
</template>
再添加一个简单的淡入淡出的样式
.fade-enter-active, .fade-leave-active{
transition: all .3s;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
通过上面的代码，我们发现之前学过的过渡这里都可以使用，可参考
我们看下我们做了半天的成果吧
首页
关于
联系方式
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程