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 : '路由的名字'}"
