Vue-router(一) HelloWorld

  1. 云栖社区>
  2. 前端那些事儿>
  3. 博客>
  4. 正文

Vue-router(一) HelloWorld

李一花 2018-07-19 10:07:06 浏览930
展开阅读全文

由于Vue在开发时对路由支持的不足,后来官方补充了vue-router插件,它在Vue的生态环境中非常重要,在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是什么?这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。

有的小伙伴会有疑虑,为什么我们不能像原来一样直接用<a></a>标签编写链接哪?因为我们用Vue作的都是单页应用,就相当于只有一个主的index.html页面,所以你写的<a></a>标签是不起作用的,你必须使用vue-router来进行管理。

本文档主要是一个Vue-router入门文档,需要先查看“Vue-cli搭建项目”文档,创建项目基础上实现以下功能。

安装vue-router

vue-router是一个插件包,所以我们还是需要用npm来进行安装的。

在使用Vue-cli搭建项目时,有一个选项是选择是否安装vue-router的,如果已经安装就不需要安装了,如果未安装需要在项目根目录下通过执行以下命令进行安装:


npm install vue-router --save-dev

如果你安装很慢,也可以用cnpm进行安装。

解读router/index.js文件

我们用vue-cli生产了我们的项目结构,你可以在src/router/index.js文件,这个文件就是路由的核心文件,我们先解读一下它。


import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件
 
Vue.use(Router)  //Vue全局使用Router
 
export default new Router({
  routes: [              //配置路由,这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称,
      component: Hello   //对应的组件模板
    }
  ]
})

增加一个Hi的路由和页面

在src/components目录下,新建 Hi.vue 文件。


<template>
  <div>
    <h2>{{message}}</h2>
  </div>
</template>
<script>
export default {
  name: "Hi",
  data() {
    return {
      message : 'Wo Shi Hi!'
    };
  }
};
</script>
<style scoped>

</style>

在router/index.js文件的上边引入Hi组件,并在router/index.js文件的routes[]数组中,新增加一个对象。


import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 引入Hi
import Hi from '@/components/Hi'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // 配置Hi对象
    {
      path: '/Hi',
      name: 'Hi',
      component: Hi
    }
  ]
})

完成以上信息就完成了一个新路由及新页面编写,启动项目在浏览器中输入

URL: http://localhost:8080/#/hi ,就可以看到以下页面,表示成功。

230104_wlYF_2273688.png

增统一的导航功能 

 在src/App.vue文件中的template里加入下面代码,实现导航。


    <!-- 导航 -->
    <div>
      <router-link to="/">Hello</router-link>
      <router-link to="/Hi">Hi</router-link>
    </div>

完成的src/App.vue文件内容为:


<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- 导航 -->
    <div>
      <router-link to="/">Hello</router-link>
      <router-link to="/Hi">Hi</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</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>

完成以上信息就完成了一个导航编写,启动项目在浏览器中输入

URL: http://localhost:8080/,就可以看到以下页面,在页面中就多了导航菜单链接,表示成功。

点击Hello进入Hello页面,点击Hi,进入Hi页面

230717_207w_2273688.png

router-link

链接<router-link>标签


<router-link to="/">[显示字段]</router-link>

  • to:是我们的导航路径,要填写的是你在router/index.js文件里配置的path值,如果要导航到默认首页,只需要写成  to="/"  ,
  • [显示字段] :就是我们要显示给用户的导航名称,比如首页  新闻页。

原文发布时间为:2018年04月19日
原文作者: 阿刚ABC 

本文来源:开源中国 如需转载请联系原作者





网友评论

登录后评论
0/500
评论
李一花
+ 关注
所属云栖号: 前端那些事儿