Vue-Router基础知识点
文章目录
一、vue-router安装与初步使用
- 安装vue-router
npm install vue-router --save
- 在src/components目录中创建两个个Vue组件页面
<!--page1.vue-->
<template>
<div>
<h2>vueRouterPage1</h2>
<p>第一页面</p>
</div>
</template>
<script>
export default {
name: "page1"
}
</script>
<style scoped>
</style>
<!--page2.vue-->
<template>
<div>
<h2>vueRouterPage2</h2>
<p>第二页面</p>
</div>
</template>
<script>
export default {
name: "page1"
}
</script>
<style scoped>
</style>
- 在src/router/index.js文件中配置使用路由
import VueRouter from 'vue-router'
import Vue from 'vue'
// 引入页面组件
import page1 from '../component/page1'
import page2 from '../component/page2'
// 1. 安装插件
Vue.use(VueRouter);
// 2. 创建router对象
const router new VueRouter({
// 更改路由hash模式
mode: 'history'
// 配置路由映射关系
routers:[
{
// 设置路由默认路径
path:'',// 缺省值
redirect:'/page1' // 重定向页面
},
{
path: '/page1'
component:page1
},
{
path: '/page2'
component:page2
}
]
});
// 3. 将router对象导出
export default router
默认情况下,路径的改变使用的是URL的hash模式,该模式下浏览器地址栏URL显示不美观,可以选择HTML5的history模式
- 在src/main.js文件中引入router实例
import Vue from 'vue'
import App from './App'
// 引入router实例
import router from './router'
Vue.config.productionTip = false
new Vue({
// 使用router
router,
render: h => h(App)
}).$mount('#app')
- 在src/App.vue文件中使用已经配置好路由的组件页面
<template>
<div id="app">
<router-link to="/page1">第一页面<router-link>
<router-link to="/page2">第二页面<router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style scoped>
</style>
:Vue在全局注册的标签,渲染页面时变成a标签
: 组件页面显示占位符,决定显示的位置
二、router-link标签
2.1 标签的定义
**<router-link>
**标签支持用户在具有路由功能的应用中 点击导航的标签,且当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。
2.2 标签的属性
- to:表示目标路由的链接。
- tag:该属性浏览器是默认渲染成a标签,设置tag值可以将
<router-link>
渲染成指定类型的标签 - replace:设置该属性后不会留下History记录。
- active-class:设置该属性后,可通过路由构造选项
linkActiveClass
用来更改默认class名。
三、动态路由
在不确定以何种的路由路径进行对页面跳转时,需要根据实际情况来动态的更改所需要的路由路径。
- 在src/components目录中创建User.vue文件并编写内容
<template>
<div>
<h2>动态路由章节学习</h2>
<p>
学习成员为:
<!-- 获取用户名 -->
<strong>{{$route.params.userName}}</strong>
</p>
</div>
</template>
<script>
export default {
name: "User"
};
</script>
<style scoped>
</style>
- 在src/router/index.js文件中配置User.vue组件路由路径
import Vue from "vue";
import VueRouter from "vue-router";
import User from "../components/User";
Vue.use(VueRouter);
const routes = [
// 配置User.vue组件路由
{
path: "/user/:userName",
component: User
}
];
const router = new VueRouter({
routes,
mode: "history"
});
export default router;
动态路由路径参数:以冒号 “:” 开头
- 在src/App.vue文件中引入User.vue组件进行展示
<template>
<div id="app">
<!-- 使用V-bind指令绑定to属性动态改变userName -->
<router-link v-bind:to="'/user/'+userId">用户</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
userName: "张三丰"
};
}
};
</script>
<style scoped>
</style>
四、路由懒加载
一个完整的网站项目,打包部署到服务器上时的文件是十分庞大的,用户在请求不采用路由懒加载设置方式的网站页面时,服务器会把全部页面组件的文件响应到客户端,客户端在接受数据时因为文件过多的原因,客户端浏览器界面可能会出现没有内容的暂时性空白页面,这样是会使得用户体验降低。
采用路由懒加载的方式设置路由后,用户请求指定组件页面服务端就只响应返回指定文件,其他的组件页面文件会存放在服务器端,等待用户下次的请求再返回响应指定文件。
import Vue from "vue";
import VueRouter from "vue-router";
// 修改一下组件页面导入方式,来实现路由懒加载
const User = () => import("../components/User");
Vue.use(VueRouter);
const routes = [
{
path: "/user/:userName",
component: User
}
];
const router = new VueRouter({
routes,
mode: "history"
});
export default router;
五、嵌套路由
一个网站只包含一级路由,路由管理的任务会就变得十分繁杂。嵌套路由是一个父路由中再包一个子含路由,给路由赋予父子关系。前端实际开发中常用到嵌套路由技术的是选项卡组件界面。
- 在src/components目录下创建两个子组件Article.vue与Images.vue
<template>
<div>
<h2>我的文章</h2>
<p>Vue-Router的学习十分开心!</p>
</div>
</template>
<script>
export default {
name: "Article"
};
</script>
<style>
</style>
<template>
<div>
<h2>Vue-router学习图片</h2>
<img src="../assets/images/5_1嵌套路由.png" />
</div>
</template>
<script>
export default {
name: "Images"
};
</script>
<style>
</style>
- 在src/router/index.js中配置Home.vue与Article.vue和Images.vue嵌套路由
import Vue from "vue";
import VueRouter from "vue-router";
// 路由懒加载方式导入主页面组件与两个子组件
const Home = () => import("../components/Home");
const Article = () => import("../components/Article");
const Images = () => import("../components/Images");
Vue.use(VueRouter);
const routes = [
{
// 设置父组件路由
path: "/home",
component: Home,
// 设置两个子组件路由
children: [
{
path: "article", // 子组件path的值里,开头不需要"/"
component: Article
},
{
path: "images",
component: Images
}
]
}
];
const router = new VueRouter({
routes,
mode: "history"
});
export default router;
- 在src/components/Home.vue中添加子组件相关标签使其在页面显示
<template>
<div>
<h2>vueRouter首页</h2>
// 在Home.vue中添加<router-link>与<router-view>标签
<router-link to="/home/article">文章</router-link>
<router-link to="/home/images">图片</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Home"
};
</script>
<style>
</style>
六、路由参数传递
具有两种传递方式:
- parame传值方式
- components目录下ParameTest.vue
<template>
<div>
<p>{{$route.params.test}}</p>
</div>
</template>
<script>
export default {
name: "User"
}
</script>
<style>
</style>
- router目录下index.js配置(部分代码)
const router = new VueRouter({
mode: "history",
routes:[
{path: "/parame/:test"}
]
});
- src目录App.vue代码
<template>
<div id="app">
<router-link v-bind:to="'/parame/'+test">传值方式
</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
test: "李四"
};
}
};
</script>
<style>
</style>
浏览器地址栏显示: http://localhost:8080/parame/李四
- query传值方式
- components目录下QueryTest.vue
<template>
<div>
<p>query传值方式</p>
</div>
</template>
<script>
export default {
name: "Query"
};
</script>
<style>
</style>
- router目录下index.js配置(部分代码)
const router = new VueRouter({
mode: "history",
routes:[
{
path: "/query",
component: Query
}
]
});
- src目录App.vue代码
<template>
<div id="app">
<router-link
v-bind:to="{path:'/query',query{name:'四',age:'20',sex:'男'}}">query</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
<style>
</style>
浏览器地址栏显示: http://localhost:8080/query?name=李四&age=20&sex=男
七、全局导航守卫
导航守卫就是路由跳转过程中的一些钩子函数,再直白点路由跳转是一个大的过程,这个大的过程分为跳转前中后等等细小的过程,在每一个过程中都有一函数,这个函数能让你操作一些其他的事儿的时机,这就是导航守卫。
注:该段解释文字摘自 知乎用户 “超厉害”
文章链接: https://zhuanlan.zhihu.com/p/54112006
- 实现点击链接跳转后,浏览器标题栏显示当前组件页面标题
import Vue from "vue";
import VueRouter from "vue-router";
// 修改一下组件导入方式,来实现路由懒加载
const Home = () => import("../components/Home");
const Article = () => import("../components/Article");
const Images = () => import("../components/Images");
const User = () => import("../components/User");
const Query = () => import("../components/Query");
Vue.use(VueRouter);
const routes = [
{
path: "/home",
component: Home,
// 添加元信息
meta: {
title: "首页"
},
children: [
{
path: "article",
component: Article
},
{
path: "images",
component: Images
}
]
},
{
path: "/user/:userName",
component: User,
meta: {
title: "用户"
}
},
{
path: "/query",
component: Query,
meta: {
title: "查询"
}
}
];
const router = new VueRouter({
routes,
mode: "history"
});
// 调用全局导航守卫
router.beforeEach((to, from, next) => {
document.title = to.matched[0].meta.title;
next();
});
export default router;