vue路由相关

Vue路由相关

路由的使用

1. 安装路由，将安装的路由导入，使用vue.use（插件），安装插件

import VueRouter from "vue-router"
Vue.use(VueRouter)

2. 创建一个路由对象，配置路由和组件的应用关系，然后导出

//导入组件
import Home from "../components/Home"
import About from "../components/About"

//创建VueRouter对象
const routes = [
	{
		path: '',
		//redirect重定向
		redirect： '/home'
	},
	//路径和组件配置一一的映射关系
	{
		path: '/home',
		component： Home
	},
	{
		path: '/about',
		component： About
	}
]
const router = new VueRouter({
	//配置路由和组件的应用关系
	routes,
	mode: 'history'
})

3. 在main.js导入，挂载在Vue实例

import router from "./router"
new Vue({
	el: "#app",
	router,
	render: h => h(App)
})

vue 路由有两种显示模式：hash和history，默认是hash

• hash —— 即地址栏 URL 中的 # 符号。比如这个URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
• 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

history.back() 等价于 history.go(-1) （浏览器后退）
history.forward() 等价于 history.go(1) （浏览器前进）

const router = new VueRouter({
	routes,
	mode: 'history'
})

router-link补充

• 属性to，用于指定路由的跳转
• 其他的一些属性
  -tag：指定为要渲染成为什么组件
  -replace：不会留下history记录，指定replace之后，不能返回上一个页面
  -active-class：对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称

<router-link to = "/home" tag = "buttom" replace active-class = "active" ></router-link>

active-class可以在路由里面修改

const router = new VueRouter({
	routes,
	mode: 'history',
	linkActiveClass: "active"
})

路由的跳转

//可以返回
this.$router.push('/home)
//不可以返回
this.$router.replace('/home)

动态路由

vue-router 的路由路径中使用“动态路径参数

const routes = [
	{
		path: '',
		//redirect重定向
		redirect： '/home'
	},
	//路径和组件配置一一的映射关系
	{
		path: '/home/:id',  
		component： Home
	}
]

组件内使用

$router是VueRouter的实例方法,可以认为是全局的路由对象，包含了所有路由的对象和属性。
$route是一个跳转的路由对象，可以认为是当前活跃的路由对象，包含当前url解析得到的数据，可以从对象里获取一些数据。如name,path,params等。

//路由传参
this.$router.push({
   path: "/home/" + val,
});
//参数获取
getId() {
	return this.$route.params.id
}

路由懒加载
用到的时候在加载路由

const Home = () => import('../components/Home')
const routes = [
	{
		path: '/home',  
		component: Home
	}
]

子路由嵌套

const Home = () => import('../components/Home')
const HomeUser = () => import('../components/HomeUser')
const routes = [
	{
		path: '/home',  
		component: Home,
		children: [
			{
				//不要'/'
				path: 'user',  
				component: HomeUser,
			}
		]
	}
]

路由传参

参数有两种类型： params、query

//params
//路由的配置
const routes = [
	{
		path: '/home/:id',  
		component： Home
	}
]
//传递的方法
this.$router.push({
   path: "/home/" + val,
});
//传递后形成的路径： /home/val
//获取参数
getId() {
	return this.$route.params.id
}

//query
//传递参数
this.$router.push({
   path: "/home",
   query: {
		name: 'why',
		age: 18
	}
});
//获取参数
getName() {
	return this.$route.query.name
}

路由守卫

const routes = [
	{
		path: '/home',  
		component: Home,
		//元数据
		meta: {
			title: '首页'
		},
		children: [
			{
				//不要'/'
				path: 'user',  
				component: HomeUser,
			}
		]
	}
]

//全局守卫
//前置守卫（guard）跳转前
router.beforeEach((to, from, next) => {
	//从from跳转到到to
	document.title = to.matched[0].meta.title
	next()    //下一步
	//next（false）  中断导航
	//next（'/'）或者next（{path：'/'}）  跳转地址
})
//后置钩子（hook）跳转后  不需要写next（）
router.afterEach((to, from) => {

})

//路由独享守卫
const router = new VueRouter({
	path： '/about',
	component: About,
	meta: {
		title: '关于'
	},
	beforeEnter: (to, from, next) => {
		next()
	}
})

//组件内导航守卫
//到达这个组件时，beforeRouteEnter:(to,from,next)=>{}
//beforeRouteEnter:(to,from,next)=>{ alert("hello" + this.name);}进行访问admin页面，会发现alert输出hello undefined。这是因为，现在访问不到我们的data属性，执行顺序是不一致，这与的声明周期有关。在执行完之前，data数据还未渲染。所以这里，next()会给一个对应的回调，帮助完成。
beforeRouteEnter:(to,from,next)=>{
     next(vm=>{
        alert("hello" + vm.name);
     })
}
//离开这个组件时，beforeRouteLeave:(to,from,next)=>{}
//点击其他组件时，判断是否确认离开。确认执行next()；取消执行next(false)，留在当前页面。
beforeRouteLeave:(to,from,next)=>{
    if(confirm("确定离开此页面吗？") == true){
         next();
    }else{
         next(false);
    }
}