Vue Router路由管理器
一、Vue Router概述
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
二、vue router的使用
下面，我们将通过一个小案例来使用Vue的路由管理，该demo将通过使用router来进行不同页面的跳转
1. 新建一个空文件夹，并使用npm进行初始化
vue init webpack 项目名
npm install -- 如果没有选自动install的话，需要手动执行该命令
npm run dev
这里我们选择手动安装
启动后项目如图：
2. 打开项目，在components目录下创建自己的两个组件
为了方便演示，此处简单的创建了Food、Cloth两个组件
Food、Cloth两个组件的代码如下：
<template>
<div>
<h1>Cloth Sale~</h1>
<h2>Cloth Sale~</h2>
<h3>Cloth Sale~</h3>
</div>
</template>
<script>
export default {
name: "Cloth"
}
</script>
<style scoped>
</style>
<template>
<div>
<h1>Food Sale~</h1>
<h2>Food Sale~</h2>
<h3>Food Sale~</h3>
</div>
</template>
<script>
export default {
name: "Food"
}
</script>
<style scoped>
</style>
3. 安装路由，在src目录下创建router文件夹
检查本地有没有vue-router包，没有的话使用npm命令导入
一般来说，如果初始化项目的时候没有自动导入router包，这里是需要手动导入的
npm install vue-router --save-dev
下载完成后，我们会在我们项目的包中看到
这就代表vue-router的包已经下载好啦
4. 配置路由
import Vue from "vue"
import VueRouter from "vue-router"
// 导入自己的组件
import Cloth from "../components/Cloth";
import Food from "../components/Food";
// 安装路由
Vue.use(VueRouter);
// 配置导出路由 ： 这里的话就是配置路由的规则，然后配置可导出后交由Vue实例对象使用
export default new VueRouter({
routes:[
{
path: '/Cloth', // 跳转的路径自己定义
name: 'ClothComponent', // name可以不写
component: Cloth // 组件对应上面导入的组件名
},
{
path: '/Food',
name: 'FoodComponent',
component: Food
}
]
})
5. 在main.js中使用该路由
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Router from './router/main' //导入我们自定义的路由
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
//为vue实例配置我们自定义的路由
router: Router,
components: { App },
template: '<div><App/><router-view></router-view></div>'
})
6. 在App.vue组件中写一下页面
<template>
<div id="app">
<!-- 为了更好的显示效果，此处先注释掉原项目的内容 -->
<!--<img src="./assets/logo.png">
<HelloWorld/>-->
<h1>首页</h1>
<router-link to="/Cloth">Cloth页面</router-link>
<router-link to="/Food">Food页面</router-link>
</div>
</template>
<script>
/*
import HelloWorld from './components/HelloWorld'
*/
export default {
name: 'App',
components: {
/*HelloWorld*/
}
}
</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
成功后，我们可以根据页面上的链接进行组件的跳转
三、书写过程中一些可能的坑
- 在书写组件的template时，需要将元素包含在一个根元素中 , 否则会报错
- 配置路由的main.js的时候，routes-component的名称需要和我们import进来的对象名一致，且不需要加引号
为vue实例配置router的时候，参考官方的导入方式。否则会报错
![]()
