路由的配置
-
先搭建 vue 项目
vue create router-app(filename) 或者 vue create . //后者是当前文件 cd router-app -
安装vue-router
yarn add vue-router -
在src目录下创建一个router目录， 里面创建一个index.js文件 ， 这个目录就是router的模块
-
在src/router/index.js中 引入需要的模块，并激活（注册）vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use( VueRouter ) //使用vue-router这个第三方插件
注意：import这个关键字要放在整个文件的上层
- 在src/router/index.js，创建一个router对象实例，并且创建路由表
/*
这个文件就是项目路由的配置文件
*/
// 1. 引入需要的模块
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
/*
! vue中插件的引入，要想和vue.js融合，那么我们必须使用Vue.use( 插件名称 )
*/
// 2. 激活插件
Vue.use( VueRouter )
// 3. 得到router对象
// const router = new VueRouter( optisons )
const router = new VueRouter({
mode: 'history',
// routes: [],路由表 路由的基本配置，一般是下面这个写法
routes
})
// 4. 导出router模块
export default router
- 在src/router/routes.js中写路由表
/*
! 路由的懒加载
! vue-router 懒加载是通过vue的异步组件和webpack的代码分割功能来完成的
*/
const Home = () => import(/* webpackChunkName: "group-foo" */ '../pages/home')
const Category = () => import(/* webpackChunkName: "group-foo" */ '../pages/category')
const List = () => import(/* webpackChunkName: "group-foo" */ '../pages/list')
const Detail = () => import(/* webpackChunkName: "group-foo" */ '../pages/detail')
const ShopCar = () => import(/* webpackChunkName: "group-foo" */ '../pages/shopcar')
const Mine = () => import(/* webpackChunkName: "group-foo" */ '../pages/mine')
const Login = () => import(/* webpackChunkName: "group-foo" */ '../pages/login')
const Register = () => import(/* webpackChunkName: "group-foo" */ '../pages/register')
const Error = () => import(/* webpackChunkName: "group-foo" */ '../pages/error')
const Recommend = () => import(/* webpackChunkName: "group-foo" */ '../pages/recommend')
const Phone = () => import(/* webpackChunkName: "group-foo" */ '../pages/recommend/Phone')
const Computer = () => import(/* webpackChunkName: "group-foo" */ '../pages/recommend/Computer')
const Pad = () => import(/* webpackChunkName: "group-foo" */ '../pages/recommend/Pad')
const routes = [// vue采用的还是传统的路由模式，一处管理，其他地方使用
// {} 每一个对象就是一个路由的配置
/*
! 路由重定向： 从某一个路由自动跳转到另外路由
*/
{
path: '/', // http://m.maoyan.com/ -> http://m.maoyan.com/home
redirect: '/home',//重定向
},
{
path: '/home',//路由路径 http://localhost/home
component: Home, // 路由路径对应的组件
name: 'home'
},
{
path: '/recommend',
component: Recommend,
name: 'recommend',
children: [//子路由表（二级路由）
{
path: 'phone', // /recommend/phone 注意：子路由不写 /
component: Phone,
name: 'phone'
},
{
path: 'computer',
component: Computer,
name: 'computer'
},
{
path: 'pad',
component: Pad,
name: 'pad'
}
]
},
{
path: '/category',
component: Category,
name: 'category'
},
{
path: '/list',//这里路由路径不要给我写成大写 \
component: List,
name: 'list'
},
{
path: '/detail',
component: Detail,
name: 'detail'
},
{
path: '/shopcar',
component: ShopCar,
name: 'shopcar'
},
{
path: '/mine',
component: Mine,
name: 'mine'
},
{
path: '/login',
component: Login,
name: 'login'
},
{
path: '/register',
component: Register,
name: 'register'
},
/*
! 错误路由匹配，记住这个配置要放在路由表的最下面
*/
{
path: '*',
component: Error
}
]
export default routes
- 在入口文件main.js中引入路由实例 router , 然后在根实例中注册
/* ! 我们main.js入口文件中使用router */
import router from './router'
new Vue({
router,//注入路由，注入路由的目的是为了然整个项目中每一个组件都可以使用路由的属性
render: h => h(App),
}).$mount('#app')
- 在src/pages下建相应界面文件
//eg:mine
<template>
<div>
我的
</div>
</template>
- router-link 和 router-view 使用，在 src/layout/index.vue 中
<template>
<div>
<div class="container">
<div class="row">
<!--导航 -->
<nav class="nav nav-pills nav-fill">
<router-link
v-for = "nav in navs"
:key = "nav.id"
:to = "nav.path" active-class = "active" class="nav-item nav-link"
> {{ nav.text }} </router-link>
<!-- <router-link
v-for = "nav in navs"
:key = "nav.id"
:to = "{ //路由传参
name: nav.name,
params: {
id: 1
},
query: {
a: 1,
b: 2
}
}" active-class = "active" class="nav-item nav-link"
> {{ nav.text }} </router-link> -->
</nav>
</div>
<div class="row" id ="router-content">
<!-- 路由展示区域 router-view 内置组件-->
<!-- <keep-alive include="Home"> -->
<!-- <keep-alive include="Home"> -->
<router-view></router-view>
<!-- </keep-alive> -->
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
navs: [
{
id: 1,
path: '/home',
text: '首页',
name: 'home'
},
{
id: 2,
path: '/recommend',
text: '9.9包邮',
name: 'recommend'
},
{
id: 3,
path: '/category',
text: '分类',
name: 'category'
},
{
id: 4,
path: '/shopcar',
text: '购物车',
name: 'shopcar'
},
{
id: 5,
path: '/mine',
text: '我的',
name: 'mine'
}
]
}
}
}
</script>
<style lang="stylus" scoped>
#router-content
margin-top 20px
padding: 15px
overflow hidden
.active
background red!important
</style>
- 在App.vue中，使用layout
<template>
<div id="app">
<lay-out></lay-out>
</div>
</template>
<script>
import LayOut from './layout'
export default {
name: 'app',
components: {
LayOut
}
}
</script>
注：路由懒加载、二级路由、路由重定向、错误路由匹配、组件缓存在me的下一篇博客中
