十八、vue-router路由
1. 什么是vue-router
Vue Router
是Vue.js官方的路由管理器(路径跳转)。它和Vue.js的核心深度集成,让构建单页面应用
变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于Vue.js过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的CSS class的链接
- HTML5历史模式或hash模式,在IE9中自动降级
- 自定义的滚动条行为
2. 安装
先查看
node_modules
中是否存在vue-router
。
vue-router
是一个插件包,所以我们还是需要用npm
或cnpm
来进行安装的:
npm install vue-router --save-dev
- 安装完之后去
node_modules
路径看看是否有vue-router
信息,有的话则表明安装成功。
如果在一个
模块化工程
中使用它,必须要通过Vue.use()
明确地安装路由功能:
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter);
3. 实例demo
- 项目文件夹中主要存在三个文件:
./src/App.vue
./src/main.js
./index.html
这三个文件的关系是
index.html
调用main.js
调用App.vue
。
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>myvue</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
main.js
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
App.vue
<template> <div id="app"> </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>
- 在
main.js
中导入vue-router
路由插件:
// 导入路由插件
import VueRouter from 'vue-router'
- 在
main.js
中显示声明使用VueRouter
:
//显示声明使用vue-router路由
Vue.use(VueRouter)
components
目录下,定义一个Content
组件和Main
组件:
Content
组件:
<template>
<div>
<h1>内容页</h1>
<h3>学科</h3>
<ul>
<li>Linux</li>
<li>Java</li>
<li>Vue</li>
</ul>
<h3>怎么学</h3>
<ol>
<li>看文档</li>
<li>看视频</li>
<li>做笔记</li>
</ol>
</div>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
Main
组件:
<template>
<div>
<h1>个人介绍</h1>
<ul>
个人主页:
<a href="http://melodyhub.ltd">melodyhub.ltd</a>
</ul>
</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
-
创建
src/router
目录,专门存放路由。 -
创建
src/router/index.js
主配置文件:
index.js
:Vue官方命名规则,主配置文件,实现全局配置path
:路由路径,类似Spring
中的@RequestMapping
name
:路由名称component
:跳转到组件
import Vue from 'vue';
//导入路由插件
import VueRouter from 'vue-router';
//导入自定义组件
import Content from '../components/Content.vue';
import Main from '../components/Main.vue';
//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
routes: [
{
//路由路径,类似Spring中的@RequestMapping
path: "/content",
//路由名称
name: "content",
//跳转到组件
component: Content,
}, {
//路由路径
path: "/main",
//路由名称
name: "main",
//跳转到组件
component: Main,
}
]
})
- 第6步只是配置了路由,但未启用路由,在
main.js
中启用上述配置的路由:
router
:全局唯一- 通过
router/index.js
主配置文件,实现全局配置
import Vue from 'vue'
import App from './App.vue'
//导入路由配置目录,自动扫描里面的路由配置
import router from './router'
//来关闭生产模式下给出的提示
Vue.config.productionTip = false
new Vue({
//配置路由
router,
render: h => h(App),
}).$mount('#app')
- 在
App.vue
中使用路由:
<template>
<div id="app">
<h1>vue-router Demo</h1>
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
<!-- 控制路由页面展示 -->
<router-view></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>
- 运行
npm run dev
,测试、查看效果。