【vue】7、配置axios简化开发，router

1、把axios挂载到Vue.prototype上，供全局使用，不用每一个组件都导入axios

在main.js下加入以下配置，以后在其他组件中使用this.$http就可以取代axios了

Vue.prototype.$http = axios
1

2、全局配置axios的请求根路径

axios.defaults.baseURL= 'http://localhost:8881/'
1

3、前端路由的工作方式

• 点击路由链接
• 导致地址的hash值发生改变
• 前端路由监听到地址hash的变化
• 前端路由把hash对应的组件渲染到浏览器

//监听hash地址的变化
window.onhashchange = ()=>{
	console.log("监听到hash地址的变化")
	//获取hash地址
	this.hashName = location.hash 
}
1
2
3
4
5
6

4、vue-router的基本使用

• 安装vue-router的包

npm install vue-router@3.5.2 -S
1

• 创建路由模块，文件夹为router，内部有一个index.js文件
  
• index.js的基本配置

import VueRouter from "vue-router"
import Vue from 'vue'
//把vue-router安装为vue项目的插件
Vue.use(VueRouter)
//路由的实例对象，里面可以配置路由规则
const router=new VueRouter()
//向外共享vue-router的实例
export default router
1
2
3
4
5
6
7
8

• 在main.js导入路由

import router from '@/router/index'
new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')
1
2
3
4
5

• 配置路由规则

const router=new VueRouter({
    routes:[
        {path:"/",redirect:"/Login"},
        {path:"/Login",component:Login},
        {path:"/CardEdit",component:CardEdit},
        {path:"/CardWarehouse",component:CardWarehouse},
        {path:"/Setting",component:Setting},
    ]
})
1
2
3
4
5
6
7
8
9

• 使用router-link和router-view实现路由界面

    <router-link to="/CardEdit">前往卡牌编辑界面router-link>
    <router-link to="/Login">前往登录界面router-link>
    <router-link to="/Setting">前往个人设置界面router-link>
    <router-link to="/CardWarehouse">前往卡牌仓库界面router-link>
    <router-view>router-view>
1
2
3
4
5

5、嵌套路由

routes:[
        {path:"/",redirect:"/Login"},
        {path:"/Login",component:Login},
        {   
            path:"/Setting",
            component:Setting,
            children:[
                {path:"SystemSetting",component:SystemSetting},
                {path:"UserSetting",component:UserSetting},
                {path:"",component:SystemSetting}
            ]
        },
    ]
1
2
3
4
5
6
7
8
9
10
11
12
13

6、动态路由

有时候跳转到同一个界面携带的参数可能不一样，需要将参数传递给跳转的界面使用动态路由来解决这个问题。
在path中使用冒号加上参数名的方式代表参数

router:{
	routes:[
		{path:"/show/:userId",coomponent:Show}
	]
}
1
2
3
4
5

获取参数

this.$route.params.userId
1

可以设置路由的props属性为true，这样参数就可以直接使用了

7、query和fullpath

router:{
	routes:[
		{path:"/show/:userId?start=10&end=20",coomponent:Show}
	]
}
1
2
3
4
5

通过query获取查询参数（也就是？后面的参数）

this.$route.query.start
this.$route.query.start
1
2

8、声明式导航和编程时导航

• 声明式导航：使用a标签或者router-link进行的页面跳转
• 使用js代码跳转界面

//跳转到指定的hash地址，并且在浏览历史中添加记录
this.$router.push()
//跳转到指定的hash地址，替换之前的历史记录
this.$router.repalce()
//正数前进，负数后退
this.$router.go(n)
//前进或后退一行
this.$router.forward()
this.$router.back()
1
2
3
4
5
6
7
8
9

9、导航守卫

控制路由的访问权限。
主要的应用在于未登录的情况下无法访问系统后台。

• 全局前置守卫：每次发生路由导航跳转都会触发全局前置守卫

router.beforeEach(function(to,from,next){
		//to：将要去的界面
		//from：当前的界面
		//next：一个函数调用next()代表允许界面跳转
		//允许跳转
		next()
		//强制跳转
		next("/error")
		//不允许跳转
		next(false)
})
1
2
3
4
5
6
7
8
9
10
11