Day 85 VUE——路由
路由
安装：npm i vue-router -S,
推荐使用 vue add router 添加组件（记得提前把代码提交到 git）
在 main,js 中
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
vue-router的基本使用
// 1.导入
import Vue from 'vue'
import router from 'vue-router'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 2.模块化机制 使用 Router
Vue.use(router)
// 3.创建路由器对象
export default new VueRouter({
routes:[
{
path:'/',
name:'home',
component:Home
},
{
path:'/about',
name:'about',
component:About
},
{
path:'/user:id',
name:'user',
component:()=>import('@/views/User')
},
{
path:'*',
component:()=>import('@/views/404')
},
]
})
命名路由
const routes = [
{
path: '/',
name: 'Home', // 对路由命名
component: Home
}
]
<template> <div id="nav"> // :to="{name:'Home'}" 使用命名路由 <router-link :to="{name:'Home'}">Home</router-link> | <router-link :to="{name:'About'}">About</router-link> | </div> <router-view/> </template>
动态路由匹配和路由组件复用
路由 监听、导航守卫
import User from '@/views/User.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
// 准备重用的路由
{
path:'/user',
name:'User',
component:User
}
]
<template> <div id="app"> <!-- :to="{params:{id:2}} params 是对路由的重用设置 --> <div id="nav"> <router-link :to="{name:'Home'}">Home</router-link> | <router-link :to="{name:'User',params:{id:1}}">User_1</router-link> | <router-link :to="{name:'User',params:{id:2}}">User_2</router-link> </div> <router-view/> </div> </template>
<template> <div> 我是用户界面{{ $route.params.id }} </div> </template> <script> export default { // 路由组件会复用的情况 // 当路由参数变化时，/user/1 切换到 /user/2 时，原来的组件实例会被复用 // 因为两个路由渲染了同个组件，复用高效 // created(){ // console.log(this.$route.params.id) // }, // 监听 // 相应路由参数变化 watch:{ $route:function(to){ console.log(to.params.id) // 发起 ajax 请求后端接口数据 数据驱动视图 } }, // 导航守卫 // beforeRouteUpdate(to,form,next){ // console.log(to.params.id) // // 放行,一定要调用 next，不然会柱塞整个路由 // next() // } } </script> <style> </style>
404路由和路由匹配优先级
404 的路由要放到最下面，不然影响正常使用
export default new VueRouter({
routes:[
{
path:'/user:id',
name:'user',
component:()=>import('@/views/User')
},
{
// 404 路由
path:'*',
component:()=>import('@/views/404')
},
]
})
同一个路径可以匹配多个路由，匹配的优先级按照路由的定义顺序
谁先定义，谁的优先级高
export default new VueRouter({
routes:[
// 同一个路径可以匹配多个路由，匹配的优先级按照路由的定义顺序
// 谁先定义，谁的优先级高
// {
// path:'/about',
// name:'about',
// component:()=>import('@/views/User')
// },
{
path:'/about',
name:'about',
component:About
},
]
})
路由查询参数
history 模式，干净的网页地址，没有 #
// 3.创建路由器对象
export default new VueRouter({
mode:'history', // history 模式，干净的网页地址
routes:[
{
path:'/',
name:'home',
component:Home
},
{
path:'/page',
name:'page',
component:()=>import('@/views/Page')
},
]
})
<template> <div id="app"> <div id="nav"> <router-link :to="{name:'user',params:{id:2}}">User_2</router-link> | <router-link :to="{name:'page',query:{id:2,foo:'title'}}">Page</router-link> </div> <router-view/> </div> </template>
<template> <div> <h3>这是一个 Page 界面</h3> </div> </template> <script> export default { created(){ const {id,foo} = this.$route.query console.log(id,foo) // 拿到这些信息就可以与后端进行交互了 } } </script> <style> </style>
路由重定向和别名
export default new VueRouter({
mode:'history', // history 模式，干净的网页地址
routes:[
{
path:'/',
// 重定向
// redirect:'home'
redirect:{name:'home'}
},
{
path:'/home',
name:'home',
component:Home,
// 别名
alias:'/hhh'
},
{
path:'/about',
name:'about',
component:About
},
]
})
路由组件传值
// 3.创建路由器对象
export default new VueRouter({
{
path:'/user:id',
name:'user',
component:()=>import('@/views/User'),
// 路由组件传值
// 方法一
// props:true
// 方法二
props:(route)=>({
id:route.params.id,
title:route.query.title,
})
},
]
})
<template> <div> <h2>这个是 User {{ $route.params.id }}</h2> <h2>使用 props 传值 {{ id }} --- {{ title }}</h2> </div> </template> <script> export default { props:['id','title'], } </script> <style> </style>
如何使用编程式导航
<template> <div> <button @click="goHome">界面跳转</button> <button @click="goBack">后退</button> </div> </template> <script> export default { methods:{ goBack(){ // 正数 前进 0 刷新界面 负数 后退 this.$router.go(-1) }, goHome(){ // 编程时导航 // 方法一 // this.$router.push('/') // 方法二 this.$router.push({ path:'/' }) // 方法三 // this.$router.push({ // name:'user', // params:{id:2} // }) // 方法四 // this.$router.push({ // path:'/reg', // query:{plan:'123'} // }) } } } </script> <style> </style>
嵌套路由的使用
// 3.创建路由器对象
export default new VueRouter({
mode:'history', // history 模式，干净的网页地址
routes:[
{
path:'/user:id',
name:'user',
component:()=>import('@/views/User'),
// 路由组件传值
// 方法一
// props:true
// 方法二
props:(route)=>({
id:route.params.id,
title:route.query.title,
}),
children:[
{
path:'App1',
component:()=>import('@/views/App1')
},
{
path:'App2',
component:()=>import('@/views/App2')
},
]
},
]
})
<template> <div id="app"> <div id="nav"> <!-- 声明式跳转 --> <router-link :to="{name:'user',params:{id:1}}">User_1</router-link> | <router-link :to="{name:'user',params:{id:2}}">User_2</router-link> | <!-- 路由嵌套 --> <router-link to='/user1/App1'>user_1/App1</router-link> | <router-link to='/user2/App2'>user_2/App2</router-link> | </div> <router-view/> </div> </template>
<template> <div> <h2>这个是 User {{ $route.params.id }}</h2> <!-- 子路由的文件出口 --> <router-view></router-view> </div> </template>
命名视图的使用
// 3.创建路由器对象
export default new VueRouter({
mode:'history', // history 模式，干净的网页地址
routes:[
{
path:'/about',
name:'about',
// component:About
// 设置命名视图
components:{
default:About, // 默认的名字
right:()=>import('@/views/right'),
left:()=>import('@/views/left'),
}
},
]
})
<template> <div id="app"> <!-- 渲染 Home 的 --> <router-view/> <router-view name='right' class="right"></router-view> <router-view name='left' class="left"></router-view> </div> </template>
使用全局守卫做登录操作
// 1.导入
import Vue from 'vue'
import router from 'vue-router'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 2.模块化机制 使用 Router
Vue.use(router)
// 3.创建路由器对象
export default new VueRouter({
mode:'history', // history 模式，干净的网页地址
routes:[
{
path:'/note',
name:'note',
component:()=>import('@/views/Note')
},
{
path:'/login',
name:'login',
component:()=>import('../views/Login')
},
{
path:'*',
component:()=>import('@/views/404')
},
]
})
<template> <div id="app"> <div id="nav"> <!-- 声明式跳转 --> <router-link :to="{name:'home'}">Home</router-link> | <router-link :to="{name:'about'}">About</router-link> | <router-link :to="{name:'note'}">我的笔记</router-link> | </div> </div> </template>
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
// 全局守卫
router.beforeEach((to,from,next)=>{
// 判断用户是否访问了 note
if(to.path === '/note'){
const user = JSON.parse(localStorage.getItem('user'))
if (user) {
// 用户已登录
next()
}else{
// 用户没有登录 跳转到登录界面
next('/login')
}
}
next()
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
<template> <div> <h2>登录界面</h2> 账号：<input type="text" v-model="user"> 密码：<input type="password" v-model="pawd"> <input type="button" value='登录' @click="login"> </div> </template> <script> export default { data(){ return{ user:'', pawd:'' } }, methods:{ login(){ // 1.获取账号密码 // 2.模拟后端交互 setTimeout(() => { let data = { user:this.user } // 保存用户名到本地 localStorage.setItem('user',JSON.stringify(data)); // 跳转到 note this.$router.push('/note') }, 1000); } } } </script> <style> </style>
组件内部的守卫的应用
// 1.导入
import Vue from 'vue'
import router from 'vue-router'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 2.模块化机制 使用 Router
Vue.use(router)
// 3.创建路由器对象
export default new VueRouter({
mode:'history', // history 模式，干净的网页地址
routes:[
{
path:'/edit',
name:'edit',
component:()=>import('../views/Edit')
},
{
path:'*',
component:()=>import('@/views/404')
},
]
})
<template> <div id="app"> <div id="nav"> <router-link :to="{name:'edit'}">编辑</router-link> | </div> </div> </template>
<template> <div> <textarea v-model="edit" id="" cols="30" rows="10"></textarea> <button @click='save'>保存</button> <ul> <li v-for="(item,index) in list" :key="index"> <h4>{{ item.title }}</h4> </li> </ul> </div> </template> <script> export default { data(){ return{ edit:'', list:[] } }, methods:{ save(){ this.list.push({ title:this.edit }) // 清空文本框 this.edit = ''; } }, // beforeRouteUpdate(to,from,next){ // // 组件重用时 这个方法才起作用 // next(); // }, beforeRouteLeave(to,from,next){ if (this.edit) { alert('请保存后在离开') next(false) }else{ next() } } } </script> <style> </style>
路由meta元信息实现权限控制
// 3.创建路由器对象
export default new VueRouter({
mode:'history', // history 模式，干净的网页地址
routes:[
{
path:'/page',
name:'page',
component:()=>import('@/views/Page'),
meta:{
// 加入到黑名单
requireAuth:true
}
},
{
path:'/edit',
name:'edit',
component:()=>import('../views/Edit'),
meta:{
// 加入到黑名单
requireAuth:true
}
},
{
path:'*',
component:()=>import('@/views/404')
},
]
})
<template> <div> <h2>登录界面</h2> 账号：<input type="text" v-model="user"> 密码：<input type="password" v-model="pawd"> <input type="button" value='登录' @click="login"> </div> </template> <script> export default { data(){ return{ user:'', pawd:'' } }, methods:{ login(){ // 1.获取账号密码 // 2.模拟后端交互 setTimeout(() => { let data = { user:this.user } // 保存用户名到本地 localStorage.setItem('user',JSON.stringify(data)); // 跳转到 note this.$router.push({ path:this.$route.query.redirect }) }, 1000); } } } </script> <style> </style>
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
// 全局守卫
router.beforeEach((to,from,next)=>{
if(to.matched.some(record=>record.meta.requireAuth)){
// 需要权限 在黑名单中
if (!localStorage.getItem('user')) {
next({
path:'/login',
query:{
redirect:to.fullPath
}
})
}else{
next();
}
}
// 在白名单中
next();
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
路由组件内在什么时机获取数据
module.exports = {
devServer:{
before:(app,serve)=>{
app.get('/api/post',(req,res)=>{
res.json({
title:'vue-router 的数据获取',
body:'在导航完成之后获取数据'
})
})
}
}
}
// 1.导入
import Vue from 'vue'
import router from 'vue-router'
import VueRouter from 'vue-router'
// 2.模块化机制 使用 Router
Vue.use(router)
// 3.创建路由器对象
export default new VueRouter({
mode:'history', // history 模式，干净的网页地址
routes:[
{
path:'/post',
name:'post',
component:()=>import('../views/Post')
},
{
path:'*',
component:()=>import('@/views/404')
},
]
})
<template> <div id="app"> <div id="nav"> <!-- 声明式跳转 --> <router-link :to="{name:'home'}">Home</router-link> | <router-link :to="{name:'about'}">About</router-link> | <router-link :to="{name:'note'}">我的笔记</router-link> | <router-link :to="{name:'edit'}">编辑</router-link> | <router-link :to="{name:'post'}">Post</router-link> | </div> </div> </template>
<template> <div class="post"> <div v-if="loading" class="loading">Loading...</div> <div v-if="error" class="error">{{ error }}</div> <div v-if="post"> <h2>标题：{{ post.title }}</h2> <h2>内容：{{ post.body }}</h2> </div> </div> </template> <script> export default { data(){ return{ post:null, error:null, loading:false } }, // 导航完成之后获取数据 created(){ console.log(this.$https) this.getPostData() }, watch:{ $route:"getPostData" }, methods:{ async getPostData(){ try { this.loading = true const {data} = await this.$https.get('/api/post') this.loading = false this.post = data; } catch (error) { console.log(error); this.error = error.toString() } } } } </script> <style> </style>
