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>
<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引入的主要内容,如果未能解决你的问题,请参考以下文章