vue-router安装及使用的示例分析

小编给大家分享一下vue-router安装及使用的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联是专业的秦州网站建设公司,秦州接单;提供成都做网站、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行秦州网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

安装

在终端通过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: '/', component:DemoHome},
  {path: '/about', component:DemoAbout},
  {path: '/contact', component:DemoContact}
 ]
})

path: 是路由的路径。

component: 是该路由需要渲染的组件。

上面代码中的DemoHome, DemoAbout, DemoContact都是单文件组件,所以我们同样需要创建上面三个组件,并导入到当前文件。这三个组件我们只是作为示例来使用,所以比较简单,代码分别如下:

DemoHome.vue:






 #home{
  width: 100%;
  height: 500px;
  background-color: khaki;
 }

DemoAbout.vue:






#about{
 width: 100%;
 height: 500px;
 background-color: antiquewhite;
}

DemoContact.vue:






 #contact{
  width: 100%;
  height: 500px;
  background-color: lightskyblue;
 }

创建好以上组件后,再使用ES6语法导入到main.js:

import DemoHome from './components/DemoHome'
import DemoAbout from './components/DemoAbout'
import DemoContact from './components/DemoContact'

最后在Vue实例中加入路由属性就可以了

new Vue({
 el: '#app',
 router,
 template: '',
 components: { App }
})

完整的main.js应该是这样:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import DemoHome from './components/DemoHome'
import DemoAbout from './components/DemoAbout'
import DemoContact from './components/DemoContact'

Vue.use(VueRouter)

Vue.config.productionTip = false

const router = new VueRouter({
 mode: 'history',
 routes:[
  {path: '/', component:DemoHome},
  {path: '/about', component:DemoAbout},
  {path: '/contact', component:DemoContact}
 ]
})
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '',
 components: { App }
})

在这里我们为了学习,所以我们简单的做个布局。接下来,我会再创建两个组件,一个叫DemoHeader, 一个叫DemoFooter。DemoHeader里面我放一个logo的图片,和导航,而这个导航的路由也将会使用我们前面定义的路由;DemoFooter就比较简单了,放一些footer信息。

下面我们看下这两个组件的代码:

DemoHeader.vue:






 .header{width:1105px;margin:0 auto;height:111px;padding:12px 0 18px;position:relative;*z-index:1}
 .header .logo{height:86px;width:256px;margin-top:25px}
 .top-nav .navlist-wrap{width:1050px;margin:0 auto;position:relative}
 .top-nav .navlist{position:absolute;right:130PX;top:-40PX}
 .top-nav .navlist .nav-btn
 {
  float:left;
  margin-left:60px;
  color:#666;
  vertical-align: middle;
  text-decoration:none;
  font-size: large;
 }

在上面的代码中,我们看到了一个陌生的标签,这个是什么玩意呢?其实他就是vue-router集成的一个组件,渲染出来的是一个标签。而他的属性to其实就是一个props属性,这里面的意思就是路由的路径,与前面定义的路由path对应。关于router-link的更多介绍可以看官网router-link API文档

DemoFooter.vue:






 #footer
 {
  height:50px;
  position:fixed;
  bottom:0px;
  left: 0px;
  background-color: #eeeeee;
  width: 100%;
  padding-top: 10px;
 }

我们的组件都已经创建好了,接下来的事情就是把他们组合到一起。这个组合,我们就用App.vue来实现吧。

先整理下我们的思路啊:

在我们的页面上,我们需要把DemoHeader, DemoFooter放进去,而我们的DemoHeader里面定义了导航,我们希望把导航出来的组件放到header和footer之间。所以大致应该是这个样组合:


    
    
    

下面看下完整的代码吧:





同样的道理,我们要是想使用一个组件,导入和注册的步骤是少不了的。

导入:

import DemoHeader from './components/DemoHeader'
import DemoFooter from './components/DemoFooter'

注册:

 components: {
  DemoHeader,
  DemoFooter
 }

在上面的代码中我们又发现了个陌生标签这个标签同样是vue-router的一个内部组件,实际上它是一个是一个 functional 组件。具体信息可以去官网router-viewAPI文档详细了解。它的作用就是渲染路由导航过来的组件,也就是这个标签内就是我们放置DemoHome, DemoAbout, DemoContact的地方。

因为它也是个组件,所以可以配合 使用。如果两个结合一起用,要确保在内层使用 , 添加上述两个标签后的template代码如下:

再添加一个简单的淡入淡出的样式:

.fade-enter-active, .fade-leave-active{
 transition: all .3s;
}
.fade-enter, .fade-leave-to{
 opacity: 0;
}

通过上面的代码,我们发现之前学过的过渡这里都可以使用,可参考Vue学习笔记进阶篇——单元素过度

最后我们看下我们做了半天的成果吧:

vue-router安装及使用的示例分析

首页

vue-router安装及使用的示例分析

关于

vue-router安装及使用的示例分析

以上是“vue-router安装及使用的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站标题:vue-router安装及使用的示例分析
标题来源:
http://ybzwz.com/article/gciege.html