完整版：https://www.cnblogs.com/yangyangxxb/p/10066650.html
1、vue路由基础和使用
a、大概目录
我这里建了一个router文件夹，文件夹下有index.html
b、准备工作：
npm install vue-router
或者 yarn add vue-router
c、配置
必须要通过 Vue.use() 明确地安装路由功能：
在你的文件夹下的 src 文件夹下的 main.js 文件内写入以下代码
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
附上我的代码：我是将router的内容写在了我的router文件夹下的index.html中，然后暴露出去，在main.js中引入
router文件夹下的index.html
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from 'pages/Home'
import Map from 'components/Map'
import Home1 from 'components/Home1'
import Find from 'components/Find'
import Mine from 'components/Mine'
import Type from 'components/Type'
import Publish from 'components/Publish'
import Search from 'components/Search'
import Success from 'components/Success'
import Need from 'components/Need'
import Position0 from 'components/Position'
import Like from 'components/scrollX/Like'
import S1 from 'components/scrollX/1'
import S2 from 'components/scrollX/2'
import Listall from 'components/mine/Listall'
import Listone from 'components/mine/Listone'
import Listchange from 'components/mine/Listchange'
const routes = [
{
path:'/',
redirect:'/ho'
},
{
path: '/ho',
redirect:'/ho/home',
component: Home,
children: [
{
name: 'home',
path: 'home',
component: Home1,
redirect:'/ho/home/like',
children :[
{
name: 'like',
path: 'like',
component: Like
},
{
name: '2000001',
path: '2000001',
component: S1
},
{
name: '2000022',
path: '2000022',
component: S2
}
]
},
{
name: 'type',
path: 'type',
component: Type
},
{
name: 'need',
path: 'need',
component: Need
},
{
name: 'find',
path: 'find',
component: Find
},
{
name: 'mine',
path: 'mine',
component: Mine
}
]
},
{
name: 'search',
path: '/search',
component: Search
},
{
name: 'position',
path: '/position',
component: Position0
},
{
name: 'publish',
path: '/publish',
component: Publish
},
{
name: 'success',
path: '/success',
component: Success
},
{
name: 'listall',
path: '/listall',
component: Listall
},
{
name: 'listone',
path: '/listone',
component: Listone
},
{
name: 'listchange',
path: '/listchange',
component: Listchange
},
{
name: 'map',
path: '/map',
component: Map
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.use(MintUI)
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
d、常规使用
<router-view></router-view>路由匹配到的组件将渲染在这里
你可以把他理解为一个版块，比如现在有一个home页面，分为两部分，内容部分和ibar部分，如图：
这五个页面共用下面的导航栏，只有导航栏上面的内容不同
<router-view></router-view>就可以写在<Ibar></Ibar>的上面
<template>
<div class="home">
<router-view></router-view>
<Ibar></Ibar>
</div>
</template>
那么在Ibar页面中如何切换路由呢？
<template>
<div class="ibar">
<router-link to="/ho/home" tag="span" active-class="active">首页</router-link>
<router-link to="/ho/type" tag="span" active-class="active">类别</router-link>
<router-link to="/ho/need" tag="span" active-class="active">需求</router-link>
<router-link to="/ho/find" tag="span" active-class="active">发现</router-link>
<router-link to="/ho/mine" tag="span" active-class="active">我的</router-link>
</div>
</template>
注意：此处的tag=“span”代表这个按钮是个span标签，你可以写样式的时候直接写span标签的样式即可
此处的active-class="active"代表点击哪个按钮哪个按钮高亮
此时我们详细看一下router文件夹下的index.js
//引入vue
import Vue from 'vue'
//引入路由
import VueRouter from 'vue-router'
//把路由挂载到vue上
Vue.use(VueRouter)
//引入我各个路由对应的component组件
import Home from 'pages/Home' import Map from 'components/Map' import Home1 from 'components/Home1' import Find from 'components/Find' import Mine from 'components/Mine' import Type from 'components/Type' import Publish from 'components/Publish' import Search from 'components/Search' import Success from 'components/Success' import Need from 'components/Need' import Position0 from 'components/Position' import Like from 'components/scrollX/Like' import S1 from 'components/scrollX/1' import S2 from 'components/scrollX/2' import Listall from 'components/mine/Listall' import Listone from 'components/mine/Listone' import Listchange from 'components/mine/Listchange'
const routes = [ {
//path是路由的路径
path:'/',
//redirect代表重定向，因为当前路径'/'并没有对应的组件，所以需要重定向到其他路由页面
redirect:'/ho' }, { path: '/ho', redirect:'/ho/home',
//当不需要重定向的时候，需要component写上当前路由对应的组件页面
component: Home,
//有些路由还有子路由，需要用到children[],
//当访问的时候，<router-link>的属性to的时候要把所有的父组件都带上
//如:此处的/ho/home/like
children: [ { name: 'home', path: 'home', component: Home1, redirect:'/ho/home/like', children :[ { name: 'like', path: 'like', component: Like }, { name: '2000001', path: '2000001', component: S1 }, { name: '2000022', path: '2000022', component: S2 } ] }, { name: 'type', path: 'type', component: Type }, { name: 'need', path: 'need', component: Need }, { name: 'find', path: 'find', component: Find }, { name: 'mine', path: 'mine', component: Mine } ] }, { name: 'search', path: '/search', component: Search }, { name: 'position', path: '/position', component: Position0 }, { name: 'publish', path: '/publish', component: Publish }, { name: 'success', path: '/success', component: Success }, { name: 'listall', path: '/listall', component: Listall }, { name: 'listone', path: '/listone', component: Listone }, { name: 'listchange', path: '/listchange', component: Listchange }, { name: 'map', path: '/map', component: Map } ] const router = new VueRouter({
//此处设置mode为history，即不带#号，在处理数据的时候会更方便一些
mode: 'history',
//ES6的写法，即routes：routes的简写，当key和value名字一样时，可简写
routes })
//把你创建的路由暴露出去，使得main.js可以将其引入并使用
export default router
引申1：
路由有一个meta属性
可以给该路由挂载一些信息
设置一些自己title、显示隐藏、左右滑动的方向之类的
meta: {
title: "HelloWorld", 要现实的title
show: true 设置导航隐藏显示
}
使用的时候：this.$route.meta.show
<Bottom v-show="this.$route.meta.show"></Bottom>
引申2:
动态路由
{
path:"/two/:id",
component:Two,
}
获取数据this.$route.params.动态路由的名字
此处是:this.$route.params.id
引申3:
路由别名alias