先自我介绍一下,小编浙江大学毕业,去过华为、字节跳动等大厂,目前阿里P7
深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年最新Web前端全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新
如果你需要这些资料,可以添加V获取:vip1024c (备注前端)
正文
四、路由
1.路由的基本概念
路由中有三个基本的概念route,routes,router.
// route 它是一条路由,就是一个路径和组件的映射关
{
path:‘/’,
component: Home
}
//routes
是一组路由,把每条route的路由组合起来,形成一个数组。
routes:[
{
path:‘/’,
component: Home
},
{
path:‘/list’,
component: List
}
]
/*router 是一个路由机制,相当于一个管理者,
他来管理路由。因为routes只是定义了一组路由,
也就是一组路径和组件的对应关系,当用户点击了按
钮,改变一个路径,router会更加路径处理不同组件
*/
var router = new VueRouter({
// 配置路由
routes:[…]
})
2.安装路由
终端中输入
npm install vue-router@next
router 下的index.js
// 1. 定义路由组件.
// 也可以从其他文件导入
const Home = { template: ‘
const About = { template: ‘
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
{ path: ‘/’, component: Home },
{ path: ‘/about’, component: About },
]
// 3. 创建路由实例并传递 routes
配置
// 你可以在这里输入更多的配置,但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
history: VueRouter.createWebHashHistory(),
routes, // routes: routes
的缩写
})
main.js
运行一下
npm run dev
router-link组件说明:
/*
router-link是vue-router已经注册好的组件,直接使用就可以了
router-link是用来切换路由的,通过to属性来跳转到指定的路由
router-link在编译的时候会自动被编译为a标签,可以使用tag属性指定编译为你要的标签
*/
router-view组件说明:
/*
router-view用来指定当前路由所映射的组件显示的位置
router-view可以理解为占位符,为路由映射的组件占位,不同路由映射的组件通过替换显示
和动态组件的效果类似
*/
3.动态路由和404NotFound
引入:不同用户登录一个界面, 我们会发现网址中有一部分相同,但是涉及到个人id值却是不同的。这就表示,它是一个组件,假设是user组件。不同的用户(就是用户的id不同),它都会导航到同一个user 组件中。这样我们在配置路由的时候,就不能写死, 所以就引入了动态路由。
path:‘/students/:id’,component:students
ps:
访问/students/101
和/students/102
的时候都能匹配到同一个路由,走同一个路由处理函数, 咱们就得定义/students/:id的路由
router 下的index.js
import {createRouter,createWebHashHistory} from ‘vue-router’
import News from ‘…/src/components/News.vue’
import Notfound from ‘…/src/components/Notfound.vue’
const Home = { template: ‘
const About = { template: ‘
const routes = [
{ path: ‘/’, component: Home },
{ path: ‘/about’, component: About },
{ path:‘/News/:id’,component:News},
{path:‘/:path(.*)’,component:Notfound
//设置路径名,组件名
}
]
const router = createRouter({
history: createWebHashHistory(),
routes,
})
export default router;
Notfound.vue
404 not found page
import {createRouter,createWebHashHistory} from ‘vue-router’
import News from ‘…/src/components/News.vue’
import Notfound from ‘…/src/components/Notfound.vue’
const Home = { template: ‘
const About = { template: ‘
const routes = [
{ path: ‘/’, component: Home },
{ path: ‘/about’, component: About },
{ path:‘/News/:id’,component:News},
{ path:‘/News/:id(//d+)’,component:News},
{ path:‘/News/:id+’,component:News},/* +至少有一个·
?有或者没有,不可以重复
有和没有都可以/
{ path:‘/News/:id*’,component:News},
{path:‘/:path(.*)’,component:Notfound}
]
const router = createRouter({
history: createWebHashHistory(),
routes,
})
export default router;
4.嵌套路由
router 下的index.js
import { createRouter, createWebHashHistory } from “vue-router”;
import User from “…/src/components/User.vue”;
import hengban from “…/src/components/hengban.vue”;
import shuban from “…/src/components/shuban.vue”;
const Home = { template: “
const About = { template: “
const routes = [
{ path: “/”, component: Home },
{ path: “/about”, component: About },
{ path: “/user”,
component: User,
children:[
{
path:‘hengban’,
component:hengban
},{
path:‘shuban’,
component:shuban
}
]
}
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
利用req.params.id
来获取路由的不同部分的数据
router 下的index.js
import { createRouter, createWebHashHistory } from “vue-router”;
import User from “…/src/components/User.vue”;
import hengban from “…/src/components/hengban.vue”;
import shuban from “…/src/components/shuban.vue”;
const Home = { template: “
const About = { template: “
const routes = [
{ path: “/”, component: Home },
{ path: “/about”, component: About },
{ path: “/user/:id”,
component: User}
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
user.vue
User页面
{{$route.params.id}}
5.使用js跳转页面
$router.push()
page.vue
<button @click=“toindexpage”>跳转到首页
router 下的index.js
import { createRouter, createWebHashHistory } from “vue-router”;
import User from “…/src/components/User.vue”;
import page from “…/src/components/page.vue”;
const Home = { template: “
const About = { template: “
const routes = [
{ path: “/”, component: Home },
{ path: “/about”, component: About },
{path:‘/page/:id’,
name:‘mypage’,//别名
component:page}
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
也可以携带参数跳转
$router.replace()
this.$router.replace({path:‘/page’,query:{search:“可可”}})
$router.go(-1)返回上一个页面
$router.go(-1)
$router.go(1)前进到下一个页面
$router.go(1)
代码
<button @click=“toindexpage”>跳转到首页
<button @click=“replacePage”>替换页面
<button @click=“$router.go(1)”>前进
<button @click=“$router.go(-1)”>后退
6.命名视图
一个页面中可以·设置多个组件进行渲染
import { createRouter, createWebHashHistory } from “vue-router”;
import shop from ‘…/src/components/shop.vue’
import shopfoot from ‘…/src/components/shopfoot.vue’
import shopTop from ‘…/src/components/shopTop.vue’
const Home = { template: “
const About = { template: “
const routes = [
{ path: “/”, component: Home },
{ path: “/about”, component: About },
{path:‘/shop’,
components:{
default:shop,//默认值页面是shop
shopfoot:shopfoot,
shopTop:shopTop
}
}
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
7.重定向和别名
{path:‘/mall’,
redirect:(to)=>{return{path:‘/shop’}}
}//重定向跳转到shop页面
//别名,取别名地址栏中的名字不会改成shop,依旧是cocoshop,可以取多个别名
alias:“/cocoshop”,
8.导航守卫
如果有权限那么可以实现跳转页面
router.beforeEach((to,from)=>{
return false;//返回为false没有权限,页面无显示
})
router.beforeEach((to,from,next)=>{
console.log(to)
next();//如果想要继续访问使用next()调用起来
})
import { createRouter, createWebHashHistory } from “vue-router”;
import shop from ‘…/src/components/shop.vue’
import shopfoot from ‘…/src/components/shopfoot.vue’
import shopTop from ‘…/src/components/shopTop.vue’
import mypage from ‘…/src/components/mypage.vue’
const Home = { template: “
const About = { template: “
const routes = [
{ path: “/”, component: Home },
{ path: “/about”, component: About },
{path:‘/shop’,
//别名,取别名地址栏中的名字不会改成shop,依旧是cocoshop,可以取多个别名
alias:“/cocoshop”,
components:{
default:shop,//默认值页面是shop
shopfoot:shopfoot,
shopTop:shopTop
},
//具体的进入某一个组件页面
beforeEnter:(to,from)=>{
console.log(“beforeEnter”)
//只会进入page页面才会产生经常会用到
}
},
// {path:‘/mall’,
// redirect:(to)=>{return{path:‘/shop’}}
// },
{path:‘/mypage’,
component:mypage
}
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
//跳转之前执行
router.beforeEach((to,from,next)=>{
console.log(to)
next();
//如果return false)有没有权利跳转到某一个页面,取消跳转
//安全导航
})
export default router;
使用选项API
beforeRouteEnter(){
console.log(“路由进入”)
},
beforeRouteUpdate(){
console.log(“路由更新组件”)
},
beforeRouteLeave(){
console.log(“路由离开组件”)
}
购物商城
<button @click=“topage”>