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:






再写页面2:






编写路由

在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






使用router的关键在于类似于标签那样的链接,就是要展示的页面。

运行项目后,访问localhost:8080/Vue学习(六)——Vue-Router引入_第1张图片

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

小结:

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

你可能感兴趣的:(Vue,vue.js,javascript,前端)