admin管理员组文章数量:1633739
目录
一、vue2的前端路由(vue-router)
1、路由:页面地址与组件之间的对应关系
2、路由方式:服务器端路由、前端路由
3、前端路由:在前端维护一组路由规则(地址和组件之间的对应关系),模式有两种:
4、SPA:Vue适合开发单页面应用(Single Page Application)
5、前端路由的工作方式:
6、vue-router路由模块:是由vue.js官方给出的前端路由模块,只能和vue项目结合,方便SPA项目实现组件之间的切换
7、示例:
8、vue-router中常用的方法
二、导航守卫
1、用途:在页面导航过程中实现重定向、取消路由、权限验证等业务
2、分类:全局守卫、组件内部守卫、路由独享的守卫
3、全局守卫:
代码示例:
三、动态路由
1、什么是动态路由: 将URL地址中可变的内容设置成参数,根据不同的参数渲染不同的组件。(组件可以复用)
2、在组件中得到动态的路由参数:this.$route.params.参数名
3、$route和$router的区别:
四、命名路由
1、什么是命名路由?
2、在 < router-link >中使用name进行映射
4、路由懒加载
3、缓存路由组件
五、命名视图
1、给< router-view >指定名称:在使用时如没有给< router-view >设置名称,默认为default,可以定义多个路由视图,每个路由视图都指定名称
2、在路由表中给路由项添加components属性:将组件渲染到给定名称的视图中
六、声明式导航 & 编程式导航
1、声明式导航:以超链接方式实现的页面跳转,就是声明式导航
2、编程式导航:通过javascript提供的api方法实现页面的跳转,就是编程式导航
3、vue-router中提供的编程式导航的API
一、vue2的前端路由(vue-router)
1、路由:页面地址与组件之间的对应关系
2、路由方式:服务器端路由、前端路由
3、前端路由:在前端维护一组路由规则(地址和组件之间的对应关系),模式有两种:
(1)hash模式:类似于锚点。在地址前带有#
(2)History模式:由Html5使用,地址前不带#,地址之间用’/‘分隔。需要服务器端的辅助
4、SPA:Vue适合开发单页面应用(Single Page Application)
一个Web网站只有一个html页面,所有组件的切换都在一个页面中完成。组件之间的切换是通过前端路由来实现的
5、前端路由的工作方式:
(1)用户点击页面中的路由链接
(2)URL的hash地址就会发生改变
(3)前端路由监听到了URL的改变
(4)前端路由会查找路由表,将hash地址对应的组件渲染到浏览器中
6、vue-router路由模块:是由vue.js官方给出的前端路由模块,只能和vue项目结合,方便SPA项目实现组件之间的切换
(1)vue-router的版本:
A、vue2中使用vue-router3:npm install vue-router@3
B、vue3中使用vue-router4: npm install vue-router@4
(2)vue-router的组成部分:
A、VueRouter:路由器类(路由器组件),用来维护路由表(URL地址与组件的映射)
B、router-link:路由链接组件,本质就是标签,路由请求的用户接口
C、router-view:路由视图组件(路由出口),主要负责渲染组件
7、示例:
(1)创建自定义组件
(2)在src下创建router/index.js:创建路由器实例
(3)在src/main.js入口文件中挂载路由器
(3)在src/main.js入口文件中挂载路由器
import Vue from 'vue'
import App from './App.vue'
import router from './router';
new Vue({
router,//注册路由器
render: h => h(App),
}).$mount('#app')
(4)在App.vue中声明路由链接:和渲染组件的
(5)在src/router/index.js中维护一个路由表
//导入模块
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);//注册路由器
//创建路由器实例
const router = new VueRouter({
//设置路由表
routes:[
{
path:'/books',
component:()=>import('../components/Books')
},
{
path:'/cards',
component:()=>import('../components/Cards')
}
],
mode:'history'//修改路由模式为'history'模式
});
export default router;
8、vue-router中常用的方法
(1)路由重定向:使用redirect 属性,用户在访问地址A时,强制用户跳转到地址C
const router = new VueRouter({
routes:[
{path:'/',redirect:'/Home'}
]
})
(2)嵌套路由:在组件中嵌套显示组件(通过路由实现组件的嵌套显示)
嵌套路由也称为多级路由,具体配置如下
const routes = [
{
path: '/admin',
component: Home,
children:[
{
path:'studentList', //二级路由前面不要带 /
component:StudentList
},
{
版权声明:本文标题:Vue2前端路由(vue-router的使用)、动态路由与导航守卫、路由和视图的命名以及声明式和编程式导航、 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729174871a1188587.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论