一、理解
vue的一个插件库,专门用来实现SPA应用
二、对SPA应用的理解
1.单页Web应用
2.整个应用只有一个完整的页面
3.点击页面中的导航链接不会刷新页面
4.数据需要通过ajax请求获取
三、什么是路由?
1、一个路由就是一组映射关系
2、key为路径,value可能是function或component
四、路由分类
1.后端路由:
(1)理解:value是function,用于处理客户端提交的请求
(2)工作过程:服务器接收一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据
2.前端路由
(1)理解:value是component,用于页面的内容展示
(2)工作过程:当浏览器的路径改变时,对应的组件就显示
五、vuex的安装和使用
一、路由的简单使用
vue2推荐安装vuex3及以下版本
npm install vue-router@3
vue3
npm install vuex --save
main.js引入
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from "./router/index.js"
Vue.use(VueRouter)
Vue.config.productionTip = false
//入口文件
new Vue({
render: h => h(App),
router:router,
}).$mount('#app')
src中添加目录router并创建js文件
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
}
]
})
component中添加About组件和Home组件
<template>
<div id="app">
<h1>About</h1>
</div>
</template>
<script>
export default {
name: 'About',
data() {
return {
}
},
methods: {
name() {
}
},
}
</script>
<style>
</style>
<template>
<div id="app">
<h1>Home</h1>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
}
},
methods: {
name() {
}
},
}
</script>
<style scoped>
</style>
使用
<template>
<div id="app">
<router-link to="/about">ABOUT</router-link> //跳转路由组件,点击后根据点击的目录控制下方引入组件
<router-link to="/home">HOME</router-link>
<hr />
<router-view></router-view> //引入组件,以及展示位置
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
components: {
},
mounted() {
},
methods: {
}
}
//汇总所有组件
</script>
<style>
#app {
}
</style>
点击路由后,下方组件进行展示和切换,由于不想加箭头,看上方网站查看是否有跳转
几个注意
1.路由组件通常存放在pages文件夹,一般组件放在componwnt中
2.通过切换消失的组件默认销毁,需要时在去挂载
3.每个组件都有一个$router属性,里面存储着自己的路由信息
4.整个应用只有一个router,可以通过$router属性获取到
2、多级路由的使用
router目录下的js文件
//用于创建整个应用的路由
import VueRouter from 'vue-router'
import About from '../pages/About'
import Home from '../pages/Home'
import Mgn from '../pages/Mgn'
import Take from '../pages/Take'
export default new VueRouter({
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
children:[{ //使用children实现下级路由跳转
path:'Mgn',
component:Mgn,
},
{
path:'Take',
component:Take,
}]
}
]
})
使用
Home文件
<template>
<div id="app">
<h1>Home</h1>
<router-link to="/home/Mgn">gan</router-link>
<hr />
<router-link to="/home/Take">cscc</router-link>
<hr />
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
}
},
methods: {
name() {
}
},
}
</script>
<style scoped>
</style>
展示
3、路由数据的传递方法
<router-link to="/home/Take/deli?id=001&name=老板dd">cscc</router-link>
单个数据传递:to='路由目录?传递参数名='数据'
<router-link :to="{
path:'/home/Take/deli',
query:{
id:'001',
name:'老板dd'
}
}">cscc</router-link>
对象数据传递
如何接收参数:this$.route.query.传递参数名
命名路由跳转name
export default new VueRouter({
routes:[
{
name:'主页',
path:'/about',
component:About,
},
{ name:'信息1',
path:'/home',
component:Home,
children:[{
name:'信息分类',
path:'Mgn',
component:Mgn,
},
{ name:'信息',
path:'Take',
component:Take,
children:[{
name:'xiangqi',
path:'deli',
component:deli,
}]
}]
}
]
})
<router-link :to="{name:'xiangqi'}">cscc</router-link>
路由的params参数
export default new VueRouter({
routes:[
{
name:'主页',
path:'/about',
component:About,
},
{ name:'信息1',
path:'/home',
component:Home,
children:[{
name:'信息分类',
path:'Mgn',
component:Mgn,
},
{ name:'信息',
path:'Take',
component:Take,
children:[{
name:'xiangqi',
path:'deli/:id/:name',
component:deli,
}]
}]
}
]
})
使用
<router-link :to="{
name:'xiangqi',
params:{
id:'001',
name:'老板dddd'
}
}">cscc</router-link>
或者
<router-link :to="to="/home/Take/deli/001/板dd">cscc</router-link>
如何接收参数:this$.route.params.传递参数名
关于router-link标签的replace属性
1.用于控制路由跳转时操作浏览器历史模式
2.浏览器的历史记录有两种写入方式:分别为push 和 replace , push 是追加历史记录, replace 是替换当前记录,replace替换当前记录。
3. 如何开启 replace 模式:<router-link replace>News</router-link>
4、不使用router-link 方法跳转
fs() {
// this.$router.push({ //push方法
// name:'xiangqi',
// query:{
// id:'001',
// name:'老板dddd'
// }
// })
this.$router.replace({ //replace方法
name: 'xiangqi',
query: {
id: '001',
name: '老板dddd'
}
})
} //.forward 前进 back 后退 go(数字) 前也可后也可
五、缓存路由组件
作用:让不展示的路由保持挂载,不被销毁
<keep-alive include="Take">
<router-view></router-view>
</keep-alive>
六、两个新的生命周期钩子
作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态
1:activated路由组件被激活时触发
2.deactivated路由组件失活时触发
七、全局路由守卫
beforeEach全局前置路由守卫---每次初始化的时候被调用,每次路由切换之前
beforeEach全局后置守卫每次初始化的时候被调用,每次路由切换之后
router.beforeEach((to,form,next)=>{
console.log(to,form,next)
})
router.afterEach((to,form)=>{
console.log(to,form)
})
beforeEnter:独享路由守卫是某一个独自使用一个前置路由守卫
{
name: '信息',
path: 'Take',
component: Take,
children: [{
name: 'xiangqi',
path: 'deli/:id/:name',
component: deli,
props: true
}],
beforeEnter((to, form, next) => {
console.log(to, form, next)
})
}
八、组件路由守卫
beforRouteEnter(to, from, next){
next()
},
beforRouteLeave(to, from, next){
next()
},