Vue Router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为
Vue-router
路由的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue router</title>
</head>
<body>
<div id="app">
<!-- router-link router-view ===》 vue-router定义好的组件-->
<!-- <router-li>控制跳转的路径和显示的文本</router-li> -->
<!-- router-view 控制的路由对应的组件 -->
<!-- active-class 控制选中对应路径时候的类名 current自己随便加自己的类名-->
<router-link to="/home" active-class="current">首页</router-link>
<router-link to="/list" active-class="current">列表页</router-link>
<a href="#/home">首页2</a>
<a href="#/list">列表页2</a>
<h1>{{name}}</h1>
<router-view></router-view>
<router-view></router-view>
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
/**
* 1.生命组件
* 2.编写路由映射表
* 3.把编辑好的映射表注入到router实例中
* 4.把router实例注入到根实例中
*
* 使用时编写router-link router-view即可
* */
let home = {
template: "<div>home</div>"
};
let list = {
template: "<div>list</div>"
};
let routes = [
// routes路由映射表
// 数组报对象的方式
{
path: "/home",//路径
component: home//路径对应的组件
},
{
path: "/list",
component: list,
}
]
let router= new VueRouter({
// 在router实例注入路由映射表
routes,//routes :routes 属性名routes是写死的
})
let vm = new Vue({
el: '#app',
data: {
name: "洋"
},
router,//把router实例注入到根实例中 router写死的 router:router
})
</script>
vue-router
- Vue Router一共提供了两种传参方式
- 1、query传参 问好传参 路由映射表不用改动 :to={path:"",query:{}} 或者:to{name:"",query:{}}, this.$route.query.XXX
- 2、params传参 路径传参 在映射表中天添加 /:变量 的形式 :to={name:"",params:{变量:""}} this.$route.params.XX
<div id="app">
<h1>{{name}}</h1>
<!-- 路径传参params:{qqq:333}} 看不出来是一个参数
使用路径传参时 路径传参只能用name不能用path-->
<router-link :to="{name:'home123',query:{id:132},params:{qqq:333}}">home</router-link>
<router-link :to="{name:'home123',query:{id:132},params:{qqq:333}}">home</router-link>
<router-link :to="{path:'/list'}">list</router-link>
<router-view></router-view>
</div>
let home = {
template:"<h1>首页</h1>",
created(){
let id = this.$route.query.id;
},
mounted() {
console.log(this)
},
}
let list = {
template:"<h1>列表页</h1>"
}
let routes = [
// {
// path:'/home/:qqq',
// name:'home123',
// component:home
// },
{
path:'/home/:qqq/hom2/:www',
name:'home123',
component:home
},
{
path:'/list',
component: list
}
];
let router = new VueRouter({
routes,
linkActiveClass:'cur'
})
let vm = new Vue({
el:'#app',
router,
data:{
name:"洋"
}
})
</script>
重定向 redirect 路由注册表routes
mode:"history"改变传参的位置隐藏#后面写到路径里面`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{name}}</h1>
<router-link :to="{path:'/home/333',query:{a:12,b:13}}">首页</router-link>
<router-link :to="{path:'/list',query:{a:12,b:13}}">列表页</router-link>
<router-view></router-view>
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
let home = {
template: "<h1>首页</h1>",
created() {
let id = this.$route.query.id;
},
mounted() {
console.log(this)
},
}
let list = {
template: "<h1>列表页<router-view></router-view></h1>"
}
let hy = {
template:"<h2>惠盈</h2>"
}
let zt = {
template:"<h2>直投</h2>"
}
let routes = [
{
path: "*",
//刚进页面是莫问路径是"/" 我们在匹配到这个路径之后让他重新指向一个新的路径
redirect: "/home/333",
},
{
// 路径传参
path: "/home/:id",
name: "home",
component: home,
},
{
path: "/list",
component: list,
children: [
//子路由映射
{
path: "/list/hy",
component: hy,
}, {
path: "/list/zt",
component: zt,
},
{
path:"/list/*",
redirect:'list/hy'
},
]
},
{
path: "/*",
//党走到一个不存在的路径时 我们让路径做到默认值，只能写到最小面否则就会是死循环
redirect: "/home/333",
},
]
const router = new VueRouter({
routes,
linkActiveClass: "currue",
// mode:"history",
// 默认："hash"
// 开发阶段用hash；上线时 可以选择history模式 ;history模式需要后台配合
})
let vm = new Vue({
el: '#app',
data: {
name: "洋"
},
router,
})
</script>
嵌套使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{name}}</h1>
<router-view></router-view>
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
// // 第一层 投资路由 invest
// 第二层 分为网贷和理财 wd lc
// 第三层 wd->(zt,dqb) lc->(hy,ht)
let invest = {
template: `<div>投资层
<router-link to="/invest/lc">理财</router-link>
<router-link to="/invest/wd">网贷</router-link>
<router-view></router-view>
</div>`,
}
let wd = {
template: `
<div>
网贷
<router-link to="/invest/wd/zt">直投</router-link>
<router-link to="/invest/wd/dqb">定期宝</router-link>
<router-view></router-view>
</div>
`
}
let lc = {
template: `
<div>
网贷
<router-link to="/invest/lc/hy">惠营 </router-link>
<router-link to="/invest/lc/ht">惠头</router-link>
<router-view></router-view>
</div>
`
}
let zt = {
template: '<h1>直投标</h1>'
}
let dqb = {
template: '<h1>定期宝标</h1>'
}
let hy = {
template: '<h1>惠盈标</h1>'
}
let ht = {
template: '<h1>惠投标</h1>'
}
const routes = [
{
path: "/",
redirect: "/invest"
},
{
path: "/invest",
component: invest,
children: [{
path: "/invest/wd",
component: wd,
children: [
{
path: "/invest/wd/zt",
component: zt,
},
{
path: "/invest/wd/dqb",
component: dqb,
}]
},
{
path: "/invest/lc",
component: lc,
children: [{
path: "/invest/lc/hy",
component: hy,
},
{
path: "/invest/lc/ht",
component: ht,
}]
}]
},
{
// 写到最后
path: "/*",
redirect: "/invest"
}]
const router = new VueRouter({
routes,
})
let vm = new Vue({
el: '#app',
data: {
name: "洋"
},
router,
})
</script>
导航式传参
-
query传参 {path:/son1,query:{a:1,b:2}}} 在每一个组件通过this.
router中放的一些方法
-
params传参
-
获取在每一个组件的·this.$route.params
-
重定向 :redirect
-
嵌套： children
-
编程式导航 this.$router.push replace() back go push({path:"son1"})
<body>
<div id="app">
<h1>{{name}}</h1>
<button @click="fn">跳转</button>
<!-- $router.back回退按钮 -->
<button @click="$router.go(-1)">回退</button>
<router-view></router-view>
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
let son = {
template:`<h1>son</h1>`
}
const router = new VueRouter({
routes: [{
path: "/son",
component: son
}]
})
let vm = new Vue({
el: '#app',
data: {
name: "洋"
},
router,
created() {
console.log(this)
},
methods: {
fn() {
setTimeout(() => {
// 一秒之后再去跳转
// this.$router.params
console.log( this.$router.params)
// this.$router.query
// this.$router.push("/son")
this.$router.push({path:"/son",query:{a:12,b:13}})
//push的参数跟to后边的值保持一致
// this.$router.replace({ path: "/son", query: { a: 12, b: 13 } })
// replace和push参数用法一样；
// 区别在与replace不会新增一条记录
// push会产生一条新的记录
// back相当于点击浏览器的回退按钮
// go(n) n是几就跳几步 ；正数往前跳负数往回跳几步 n=-1时相当于back
}, 1000)
}
}
})
</script>
