用 Vue.js + Vue Router 创建单页应用,感觉很自然:使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。下面是个基本例子:
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
import { createRouter, createWebHashHistory } from 'vue-router'
//createRouter用于创建路由的实例对象
//createWebHistory 用于指定路由的工作模式(hash模式)
import Home from '../components/Home'
// 定义 hash 与组件之间的对应关系
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
//404页面
//ue3重定向写法:"/:catchAll(.*)", "/:pathMatch(.*)", path: "/:pathMatch(.*)*",三种写法
path: '/:catchAll(.*)',
name: '/404',
component: () => import('../views/404.vue')
]
创建路由实例对象
const router = createRouter({
// 指定路由工作模式
history: createWebHashHistory(),
routes
})
export default router
import Vue from 'vue'
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'
//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)
//创建vm
new Vue({
el:'#app',
render: h => h(App),
router:router
})
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
Hello App!
Go to Foo
Go to Bar
mounted() {
congsole.log('组件实例',this)
}
$route :定义在路由组件内的配置规则(每个路由组件的信息是不一样的):
$router:是全局路由相关信息。每个路由组件的内容都是一样的,里面有很多实用方法。
整个应用只有一个router,可以通过组件的$router属性获取到。
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news', //注意:news前不需要写“/”
component:News,
},
{
path:'message',
component:Message,
}
]
}
]
})
注:访问的时候必须保持路径完成,如
Message
需求:选中message按钮后,点击消息001,可以向detail组件内传递参数,以动态显示消息标题等内容。
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News,
},
{
path:'message',
component:Message,
children:[
{
path:'detail',
component:Detail,
}
]
}
]
}
]
})
-
{{m.title}}
路由父组件向子组件传递参数
跳转{{m.title}}
2.跳转路由并携带query参数,to的对象写法
跳转
路由子组件接受父组件传递的参数
- 消息编号:{{$route.query.id}}
- 消息标题:{{$route.query.title}}
$route是每个实例化组件的一个参数,因此使用它接受参数
$route.query.id
$route.query.title
上述示例中,访问detail组件,路径要配置为:/home/message/detail,比较繁琐,因此可以使用命名路由进行简化。
1.给路由命名
export default new VueRouter({
routes:[
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News,
},
{
path:'message',
component:Message,
children:[
{
name:'gcshi',
path:'detail',
component:Detail,
}
]
}
]
}
]
})
2.简化跳转:
跳转
跳转
跳转
1.配置路由,声明接受的params参数
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News,
},
{
path:'message',
component:Message,
children:[
{
name:gcshi,
path:'detail/:id/:title',//使用占位符声明接受的参数
component:Detail,
}
]
}
]
}
]
})
params参数必须进行配置,:id/:title为占位符,属性名可以自定义。
2.传递参数
跳转
6,你好即配置的id和title属性
跳转
特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置。
3.接受参数
$route.params.id
$route.params.title
复习:路由传参的两种逻辑
除上述两种方式外,还可以采用在子组件中使用prosps的方式进行参数接受。(query和parmas均可以)
首先,在路由父组件中用to进行参数传递、配置是不变的。
然后,需要在router的index.js进行配置
{
path:'message',
component:Message,
children:[
{
name:'gcshi',
path:'detail',
component:Detail,
//props的第三种写法,值为函数
props($route){
return {
id:$route.query.id,
title:$route.query.title,
}
}
}
]
}
Detail组件是用于接受参数的组件,props配置项是返回一个函数,它代表为子组件detail进行props配置。其默认参数是message组件的$route属性,因此可以方便拿到来自父组件的属性值。
最后,在子组件中使用props进行接受参数即可。
- 消息编号:{{id}}
- 消息标题:{{title}}
个人感觉,这种方式是真滴麻烦。。。。。。
push:浏览器记录可以前进后退。
repalce:浏览器上一次的历史记录被覆盖
//或
1.作用:让不展示的路由组件保持挂载,不被销毁
2.具体编码
路由被缓存后,如果在A路由内写了一个定时器,并在beforeDestory生命周期中写了清空定时器的函数。但切换到B组件时,由于使用缓存,该定时器是无法被清除的,因为beforeDestory不会生效。
那么,如果在使用缓存路由组件的同时,又能在切换组件的同时清空定时器呢?
使用路由的生命周期钩子!
作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态
具体名字:
1.activated :路由组件被激活时触发
2.deactivated :路由组件失活(切换走)时触发
路由跳转时,如果用户没有权限(localstorage中没有获取到token)时,路由跳转时应该返回登录页。这一功能可以借助路由守卫来实现。
路由守卫包括 前置路由 和 后置路由
前置路由是初始化、页面切换时被调用,用于拦截页面的跳转操作。
路由后置守卫是离开页面时的一个操作。
基本语法:
//创建并暴露一个路由器
const router = new VueRouter({
routes:[
{
name:'xiaoxi',
path:'message',
component:Message,
meta:{isAuth:true,title:'消息'},
}
]
})
//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
console.log('前置路由守卫',to,from)
if(to.meta.isAuth){ //判断是否需要鉴权
if(localStorage.getItem('school')==='atguigu'){
next()
}else{
alert('学校名不对,无权限查看!')
}
}else{
next()
}
})
//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
console.log('后置路由守卫',to,from)
document.title = to.meta.title || '硅谷系统'//修改网页标题
})
export default router
前置路由接受三个参数,后置路由只是接受to、form参数
to、form和next中间件
to和form都是一个对象,里面包括了路由名name属性、路由前往或离开的路径path、query及parmas参数已经路由元信息meta(用户在routes中自定义的数据)
next是一个函数,next()表示放行拦截。
单个组件的路由守卫beforeEnter
//创建并暴露一个路由器
const router = new VueRouter({
routes:[
{
name:'zhuye',
path:'/home',
component:Home,
meta:{title:'主页'},
children:[
{
name:'xinwen',
path:'news',
component:News,
meta:{isAuth:true,title:'新闻'},
beforeEnter: (to, from, next) => {
console.log('独享路由守卫',to,from)
if(to.meta.isAuth){ //判断是否需要鉴权
if(localStorage.getItem('school')==='atguigu'){
next()
}else{
alert('学校名不对,无权限查看!')
}
}else{
next()
}
}
},
]
}
]
})
export default router
//配置方式,默认为hash模式
//创建并暴露一个路由器
const router = new VueRouter({
mode:'history',
routes:[
...
]
})
哈希模式
路径中带有#号的称为哈希模式,#号及后面的内容称为哈希值
//访问该路径,服务器接受到的路径为 /student/dema
localhost://8080/student/dema
//访问该路径,服务器接受到的路径为
localhost://8080/student/#/dema /student
历史模式
历史模式更加美观,路径中不带#号,使用必须配合后端