vue-router
- 先通过vue-cli生成一个带路由的项目。进入router/index.js
import Vue from 'vue' // 引入vue模块
import VueRouter from 'vue-router' // 引入路由模块
import Home from '../views/Home.vue' // 引入组件,此处相当于对应路由的页面
Vue.use(VueRouter)// 全局应用路由
const routes = [ // 定义路由匹配规则
{
path: '/', // path表示匹配的路由路劲
name: 'Home',// 对应路由的名称,为命名路由,后续详细说明
component: Home // 渲染的组件
},
{
path: '/about',
name: 'About',
component: () => import( '../views/About.vue') // 此处路由异步加载,也称路由懒加载
}
]
const router = new VueRouter({// 将定义的路由规则实例化
mode: 'history',// 选择路由的模式,可以更改为hash路由
base: process.env.BASE_URL,// 环境
routes// 路由规则
})
export default router
- 页面中的使用,先介绍两个标签
<router-link to="/">Home</router-link>
<router-view/>
router-link相当于a标签,用于路由的跳转。router-view则是用于路由渲染模块的容器,细节请看后续内容。
-
上面已经是个基本的路由和渲染了,但是如果我们需要了解其中的属性,再router-link中:
- to: 属性,表示要跳转的路由地址,可以接受字符串,通过绑定属性还可以接受对象,对象可以用path表示路径,query表示传递的参数。也可以用name来对应命名路由的名字,params来传递参数。
路由的配置--Home的
- to: 属性,表示要跳转的路由地址,可以接受字符串,通过绑定属性还可以接受对象,对象可以用path表示路径,query表示传递的参数。也可以用name来对应命名路由的名字,params来传递参数。
{
path:'/',
redirect: '/home'
},
{
path: '/home',
name: 'Home',
component: Home,// 第一层的router-view渲染
children: [
{
path: 'home1',
name: 'home11',
component: () => import('../components/homechild1')// Home中的router-view根据路由渲染为home1或者home2,并且path不能跟‘/’,不然表示的是跟路劲,这种又称为嵌套路由,再'/'下面是不会渲染的,可以默认设置重定向为/home1来自动触发。
},
{
path: 'home2',
name: 'home22',
component: () => import('../components/homechild2')
}
]
}
组件中使用
```
* append:属性,介绍这个钱将<router-link :to="{path: 'home1'}">home1</router-link>如果添加了append属性,发现能跳转到响应的路由,和没有添加没有上面区别,但是再次点击后,路由变成了/home/home1/home1
由此可知,该属性是将path的路劲直接拼接到路由中。如果是从home2在点击home1则会是/home/home2/home1
,使用to用path的时候,如果子路由没有展开,点击的时候会导致路劲为home/home1
,如果点击了:to="{name: 'home22'}"
的标签,在切回来就会出现路劲为home/home/home1
,解决办法如下,第一种,不使用path,用name代替。第二种,默认进入home的时候展开home/home1,改写:to="{path: 'home/home1'}"为 :to="{path: 'home1'}">。如果不重定向展开home1,点击的时候这样写会导致跳转路劲为/home1。如果点击了home2在点击home1则又会是正常的。
* tag: 表示router-link渲染出来的标签,默认是渲染为a标签。使用该属性可以让router-link渲染渲染为想要的其他标签,同时还是能够存在路由导航的功能,相当于为那个标签添加了点击事件,事件内进行了编程导航。
* replace:不会留下history记录,即不会返回,使用在类似于登录成功,不能再返回登录界面进行登录。
* active-class: 默认为router-link-active,后面可以添加自己想要类名。
* router-link-exact-active:配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass
进行全局配置的。这里子路由就会默认还有该类名父级路由则是router-link-active。
-
router-view:该组件是一个路由渲染的容器,承载的需要渲染的内容,根据嵌套路劲,嵌套渲染组件。
- name:这个属性十分重要且好用,命名试图,如果想在一个页面中渲染出底部的导航组件,但是又有不含有底部的组件的时候,怎么来区分什么时候渲染底部,什么时候不渲染底部。都放到组件页面内,那么多个页面都需要引入底部,注册,使用。但是使用命名视图后就会十分简单。如下:
{
- name:这个属性十分重要且好用,命名试图,如果想在一个页面中渲染出底部的导航组件,但是又有不含有底部的组件的时候,怎么来区分什么时候渲染底部,什么时候不渲染底部。都放到组件页面内,那么多个页面都需要引入底部,注册,使用。但是使用命名视图后就会十分简单。如下:
path: '/about',
name: 'About',
components: {
default: () => import( '../views/About.vue'),
footer: () => import( '../components/footer.vue')
}
}
```
default为默认导出的组件,当视图容器没有标明名称的时候默认使用该组件,name属性值为footer的时候使用footer对应的组件进行导出,同时可以使用两个视图容器来承载默认导出的和footer的组件。
- 生成实例中用到的属性:
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
-
mode: 配置路由默认,目前vue-cli3.0生成的是history,可以选择的有hash,abstract
* hash:使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器
* history:依赖 HTML5 History API 和服务器配置
* abstract:支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式- base:默认为'/',应用的基路径。
-
$route:包含了当前path(绝对路劲标识),query、params等,用于读取相关信息或参数。只读属性
-
$router: 包含
-
router.push,跳转的路劲,存在历史记录# router.replace,跳转路劲,不存在历史记录# router.go,页面前进后退# router.back,页面后退一步# router.forward,页面前进一步
-
-
下期路由守卫,一定更精彩,欢迎点赞、收藏加关注,哈哈哈哈😄