Vue学习——Vue-Router引入

Posted sadoshi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue学习——Vue-Router引入相关的知识,希望对你有一定的参考价值。

前言

Vue-Router是Vue官方推荐的使用的路由库。由于官方文档以单页面为主,而实际项目大多不是这样。所以这篇文章记录一下搭建一个简单Vue应用如何引入Vue-Router。

新建项目

安装依赖

我们还是按照之前《Vue学习(一)——组件基础》的方式初始化项目。

vue create router1

之后进入目录并安装依赖

cd router1
npm install

这之后在项目的目录里安装Vue-Router。

npm install vue-router --save

编写页面

这里我们准备两个简单的页面,用来展示路由的作用

编写页面1:

<template>
  <div class="hello">
    <h1>页面1</h1>
  </div>
</template>

<script>
export default 
  name: 'HelloRouter1',

</script>

<style scoped>
</style>

再写页面2:

<template>
  <div class="hello">
    <h1>页面2</h1>
  </div>
</template>

<script>
export default 
  name: 'HelloRouter2',

</script>

<style scoped>
</style>

编写路由

在src目录下新建文件夹router。在router目录下新建index.js:

import Vue from 'vue'
import Router from 'vue-router'

import HelloRouter1 from '@/components/HelloRouter1'
import HelloRouter2 from '@/components/HelloRouter2'

Vue.use(Router);

export default new Router(
  mode: 'history',
  routes: [
    
      path : '/hello1',
      name : 'HelloRouter1',
      component: HelloRouter1
    ,
    
      path : '/hello2',
      name : 'HelloRouter2',
      component: HelloRouter2
    ,
  ]
)

第2行加载vue-router,第7行安装组件,第9行-23行新建一个Router。routes属性是一个数组,数组的每一个元素是一个对象,必须包含path和component属性,path是访问路径,component是对应的组件。

下一步就是把路由文件挂载到Vue实例,修改main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue(
  render: h => h(App),
  router,
).$mount('#app')

使用路由

在App.vue中使用路由,修改App.vue

<template>
  <div id="app">
    <router-link to="/hello1">页面1</router-link>&nbsp;&nbsp;
    <router-link to="/hello2">页面2</router-link>
    <router-view/>
  </div>
</template>

<script>


export default 
  name: 'App',
  components: 
  

</script>

<style>
</style>

使用router的关键在于<router-link>和<router-view>。<router-link>类似于<a>标签那样的链接,<router-view>就是要展示的页面。

运行项目后,访问localhost:8080/

 点击页面1和页面2两个链接,可以观察地址栏和页面的变化。

小结:

这篇文章简单讲了Vue-Router的基本使用。读者应该也发现这样初级的使用方式会有很多问题,例如router/index.js每写一个页面,就要配置对应的路径。对于大型应用来说,几十个甚至几百个页面很正常,如果每个页面都要逐个配置,文件会非常庞大臃肿,也不便于维护。当然还有其他问题,留到以后再讲。

以上是关于Vue学习——Vue-Router引入的主要内容,如果未能解决你的问题,请参考以下文章

Vue-router学习- 路由匹配

vue学习笔记——vue-router(路由)

Vue-router learning01

vue2.0学习之路由

Vue-router入门

vue-router