Vue.js中的router基础(一级、二级)
- vue 路由的mode(模式)有几种, 分别是什么?在那些环境下运行?
- hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。
- history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】
- abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式。
一级路由
1.路由的使用步骤(以一个简单SPA单页面应)
- 安装 vue-router
yarn add vue-router -S
- 在src目录下创建一个router目录, 里面创建一个index.js文件 , 这个目录就是router的模块
- 在index.js中引入第三方的依赖包, 并注册路由
import Vue from 'vue'
import vueRouter from 'vue-router'
Vue.use(vueRouter)//这个一定不能忘
注意: import这个关键字要放在整个文件的上层
2.创建了一个router对象实例,并且创建路由表routes
//创建路由表
const routes = [
{
}
]
//创建router示例
const router=new vueRouter ({
//路由表
routes, // 必写的
//路由的使用模式 #/home(hash) /home(h5 history)
mode: 'history',
//进行路由模块划分
modules: {}
})
3.index.js中导出router实例
export default router
4.入口文件main.js中引入路由实例 router , 然后在根实例中注册
import router from './router/index.js'
new Vue({
router,//根实例中注册()
render: h => h(App),
}).$mount('#app')
常见错误:
- router小写(在import router from './router/index.js'这里我把router大写爆红)
5.在components中创建页面组件
1.先来两个文件夹
- common放可以复用的组件
- pages放页面组件
2.在pages下写页面组件
我创建了,Home,List,Detail,Shopcar,Reg,Login,User这些组件
书写规范,仿造Vue.cli3的写法,文件名首字母大写
<template>
<div class="home-box">
Home
</div>
</template>
6.在index.js中引入components里的组件
import Vue from 'vue'
import vueRouter from 'vue-router'
import Home from '../components/pages/Home'
import List from '../components/pages/List'
import Detail from '../components/pages/Detail'
import Login from '../components/pages/Login'
import Register from '../components/pages/Register'
import User from '../components/pages/User'
import Shopcar from '../components/pages/Shopcar'
import Error from '../components/pages/Error'
import Yyb from '../components/pages/Yyb'
import Junge from '../components/pages/Junge'
7.配置index.js里的路由表
路由表将变成这样
const routes = [
{
path : '/home',
component : Home
},
{
path : '/list',
component : List
},
{
path : '/detail',
component : Deatil
},
{
path : '/shopcar',
component : ShopCar
},
{
path : '/reg',
component : Reg
},
{
path : '/login',
component : Login
},
{
path : '/user',
component : User
}
]
8.调整APP.vue,将所有组件展示出去
<template>
<div id="app">
<h2>路由router</h2>
<div class="container">
<div class="row">
<nav class="nav nav-tabs nav-stacked">
<router-link class="nav-link" to = "/home"> Home </router-link>
<router-link class="nav-link" to = "/list"> list </router-link>
<router-link class="nav-link" to = "/detail"> detail </router-link>
<router-link class="nav-link" to = "/shopcar"> shopcar </router-link>
<router-link class="nav-link" to = "/login"> login </router-link>
<router-link class="nav-link" to = "/user"> user </router-link>
</nav>
</div>
<div class="row">
<!-- 路由的展示区域 -->
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
/*
1.上面的router-link原本是a标签的,但是因为index.js里是history模式,
所以用了router-link,用了router-link,a标签的href就变成了to
2.hash的话就用a,用a的href
*/
export default {
name: 'app',
components: {
}
}
</script>
<style lang="stylus">
</style>
到了这里启动服务页面可以打开,也可以正常展示,但是有两个路由的缺陷
- ①页面一打开域名后是没有/home的所以路由展示区域没有东西
- ②如果打开一个没有的router路由,那么路由展示区域啥也没有,不知道发生乐啥
9.解决前面路由的缺陷(页面打开重定向首页,404页面)
解决的方法很简单,就是重定向
//创建路由表
const routes = [
//一定要放在第一个,表示第一次匹配
{
path : '/',
component : Home
},
{
path : '/home',
component : Home
},
{
path : '/list',
component : List
},
{
path : '/detail',
component : Deatil
},
{
path : '/shopcar',
component : ShopCar
},
{
path : '/reg',
component : Reg
},
{
path : '/login',
component : Login
},
{
path : '/user',
component : User
},
//一定要放在最后一个,因为路由匹配是按顺序匹配的,只有当匹配了所有的都找不到才说明是不存在的页面
{
path : '**',
component : Error
}
]
两点注意事项
- 页面打开重定向到Home路由需要放在路由表顶部
- 页面404提示需要放在路由表尾部
知识点:
vue路由模式的确定 mode
针对index.js中路由示例里的mode
const router=new vueRouter ({
//路由表
routes, // 必写的
//路由的使用模式 #/home(hash) /home(h5 history)
mode: 'history',
//进行路由模块划分
modules: {}
})
看这个mode,有几个知识点
- 如果模式是hash,那么域名后缀里有个#home
- 如果是hash,呢么App.vue里的导航栏就用a标签就可以了
二级路由
二级路由我们由上面一级路由延伸来
来个场景:我们来List路由下增加两个二级路由
1.需要在index.js中的路由表routes下的这一块里面加上这些
{
path : '/list',
component : List,
children : [
{
path : 'hqg',//注意:二级路由不需要/
component : Hqg,
}
]
},
这里设置好了,还要在compontes里的pages里新建一个Hqg的组件,然后index.js顶部引入Hqg组件
//Hqg组件
<template>
<div class="home-box">
Hqg
</div>
</template>
//又一个二级路由组件,上下不是一个文件
<template>
<div class="home-box">
我是个二级路由
</div>
</template>
index.js顶部引入二级路由
import Hqg from '../components/pages/Hqg.vue'//二级路由
import Erji from '../components/pages/Erji.vue'//再来一个二级路由
2.上面完成了后我们需要在对应的一级路由里加上展示区域
我们用的是一级路由list所以我们在List.vue里加展示区域( <router-view> )
改造后称为这样
<template>
<div class="list-box">
List
<router-link class="nav-link" to = "/list/hqg"> hqg </router-link>
<router-link class="nav-link" to="/list/erji"> erji </router-link>
<router-view></router-view>
</div>
</template>
3.完成了这些,已经可以自由切换了,效果如下
4.我们可以继续改造,有时候会出现5级路由啊,6级路由的
路由太长写起来太繁琐该怎么办呢?可以命名路由
命名路由只需要加个name属性,然后改造一下对应的一级路由里的展示区域
index.js里路由命名(只命名了第二个二级路由)
{
path : '/list',
component : List,
children : [
{
path : 'hqg',//注意:二级路由不需要/
component : Hqg,
},
{
path : 'erji',//注意:二级路由不需要/
component : Erji,
name : 'hbb'
}
]
}
List.vue改造
<template>
<div class="list-box">
List
<router-link class="nav-link" to = "/list/hqg"> hqg </router-link>
<!-- <router-link class="nav-link" to="/list/erji"> erji </router-link> -->
<router-link class="nav-link" :to="{name : 'hbb'}"> erji </router-link>
<router-view></router-view>
</div>
</template>
注意事项:
- 路由命名的写法有不同的,to前加了:
- :to里的写法是"{name : '路由的名字'}"