系列文章目录
路由介绍
获取路由数据，在#之后的数据,例如一个访问链接file:///F:/repos/vscode/git/VueLearn/vue17.1.html#/sss
会返回#/sss
alert(location.hash);
路由原理：
主要是因为有一个onhashchange事件,根据change事件获取路由，并根据路由的属性进行switch的判断
var hash=location.hash;
switch (hash) {
case "sss":
break;
default:
break;
}
路由模拟 仿照路由规则
1.先定义一个routePage方法，用于根据输入的参数，变更对应的数据
function routePage(hashUrl) {
switch (hashUrl) {
case "#/page1":
document.querySelector("router-view").innerHTML = "这是page1";
break;
case "#/page2":
document.querySelector("router-view").innerHTML = "这是page2";
break;
default:
break;
}
}
2.定义匿名方法的立即执行
此处作用：页面加载的时候会立即执行内部(步骤一)的方法
(function () {
routePage("#/page1");
})();
3.定义点击onhashchange 方法的执行动作
onhashchange = function () {
var hashUrl = location.hash;
routePage(hashUrl);
}
当每次点击链接后，都会触发onhashchange事件,步骤的方法都不会被执行，从而执行步骤1的方法，完成router的
router-link
router-link 的作用类似于a标签，可以通过to属性只想到对应的路由。
路由本质：是一个数组，路由的本质是一个组件
引入路由包(需要先引入vue包)
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
配置路由
创组件，绑路由，双实例下路由熟
1.创建组件(components)
这里的组件用于在后续制定的routes规则中，绑定组件以展示h5
代码
let compon1 = {
template: "<h1>这是路由一</h1>"
}
let compon2= {
template: "<h1>这是路由二</h1>"
}
2.绑定路由规则
这里其实就是制定了跳转规则
当页面访问http://xxxx/sd#/page1时,会自动绑定组件compon1
//配置路由规则
var routes = [
{ path: "/page1", component: compon1 },
{ path: "/page2", component: compon2},
]
3.创建router实例
类似于生成对象。要在本页面生效，先生成对应实例
//创建路由实例
var router = new VueRouter({
//原routes:routes ，因为key和value名称一致，所以可以简写，且必须是routes
routes
})
实例化vue对象
这里的作用是，将router对应绑定到vue对象里，让他在本vue绑定的对象中可以使用
//挂载路由
var vm= new Vue({
el:"#app",
//router:router 这里可以简写是因为 key名和value名称一致，所以可以简写，如果定义的value对象是其他名称，则需要去全部写
router,
});
使用路由
<!-- 路由链接地址 -->
<router-link to="/page1">page1</router-link>
<router-link to="/page2">page2</router-link>
<!-- 路由视图 -->
<router-view></router-view>
通过router-link标签转向对应的router
路由参数
获取路由的参数共有两种
this.$route.params
this.$route.query
这两个使用的区别在于：routes中是否绑定对应的path属性
path属性就是诸如id，pid，name这些
例如：
我在定义的routes中，只定义到了普通的/page1的路由
而在router-link中to定义的路径中，除了基本的页面属性，还有其他参数
此时就只能使用this.$route.query来获取参数
var routes = [ { path: "/page1", component: page1 }]
<router-link to="/page1?id=1&pid=2">page1</router-link>
let page1 = {
template: "<h1>这是路由一</h1>",
data: {
},
mounted() {
console.log("这是路由一\n");
//获取动态参数
console.log(this.$route.query.id);
//获取多个参数时，获取query即可
console.log(this.$route.query)
}
}
而在routes如果定义了输入的参数或者是定义name属性
var routes=[
{ path: "/page2/:id/:pid", component: page2 },
{ path: "/page3/:id", component: page3, name: "page3" },//设置name
{ path: "/page4", component: page4, name: "page4" }，
]
那么就需要使用this.$route.params
编程式导航
全代码
router-link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- 路由的包依赖于vue包，需要先引入vue -->
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
<title>route-link</title>
</head>
<body>
<!-- 配置路由时，路由的配置必须优先于vue实例的配置 -->
<div id="app">
<!-- 路由链接地址 -->
<router-link to="/page1">page1</router-link>
<router-link to="/page2">page2</router-link>
<!-- 路由视图 -->
<router-view></router-view>
</div>
<script>
//#region 1.配置路由 ，路由是一个数组，路由的本质是一个组件
//创建组件
let page1 = {
template: "<h1>这是路由一</h1>"
}
let page2 = {
template: "<h1>这是路由二</h1>"
}
//配置路由规则
var routes = [
{ path: "/page1", component: page1 },
{ path: "/page2", component: page2 },
]
//创建路由实例
var router = new VueRouter({
//原routes:routes ，因为key和value名称一致，所以可以简写，且必须是routes
routes
})
//#endregion
// 2.实例化vue对象
//挂载路由
var vm= new Vue({
el:"#app",
//router:router 这里可以简写是因为 key名和value名称一致，所以可以简写，如果定义的value对象是其他名称，则需要去全部写
router,
});
</script>
</body>
</html>
路由参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
<title>路由参数</title>
</head>
<body>
<div id="app">
<router-link to="/page1?id=1&pid=2">page1</router-link>
<router-link to="/page2/1/157">page2</router-link>
<!-- 可以使用:to来进行动态设定 -->
<!-- <router-link :to="{path:'/page3'}">page3</router-link> -->
<router-link :to="{name:'page3',params:{id:'3'}}">page3</router-link>
<router-view></router-view>
</div>
<script>
let page1 = {
template: "<h1>这是路由一</h1>",
data: {
},
mounted() {
console.log("这是路由一\n");
//获取动态参数
console.log(this.$route.query.id);
//获取多个参数时，获取query即可
console.log(this.$route.query)
}
}
let page2 = {
template: "<h1>这是路由二</h1>",
mounted() {
console.log("这是路由二\n" );
//此处能展示数据，是因为，在routes中，定义了page2的定义为page2/:id 用来获取id作为参数
// console.log(this.$route.params.id);
//此处在routes中定义了path参数之后，也可以获取对应的数据，但是如果path的参数与路径个数不一致，则不会展示数据
console.log( this.$route.params);
}
}
let page3 = {
template: "<h1>这是路由三</h1>",
mounted() {
console.log("这是路由三\n" );
//此处能展示数据，是因为，在routes中，定义了page2的定义为page2/:id 用来获取id作为参数
// console.log(this.$route.params.id);
//此处在routes中定义了path参数之后，也可以获取对应的数据，但是如果path的参数与路径个数不一致，则不会展示数据
console.log( this.$route.params);
}
}
let page4 = {
template: "<h1>这是路由四</h1>",
mounted() {
console.log("这是路由四\n");
//此处能展示数据，是因为，在routes中，定义了page2的定义为page2/:id 用来获取id作为参数
// console.log(this.$route.params.id);
//此处在routes中定义了path参数之后，也可以获取对应的数据，但是如果path的参数与路径个数不一致，则不会展示数据
console.log( this.$route.params);
}
}
var routes = [
{ path: "/", redirect: "/page4" },//此处可设置默认路由，当访问/时，默认跳转到page4
{ path: "/page1", component: page1 },
{ path: "/page2/:id/:pid", component: page2 },
{ path: "/page3/:id", component: page3, name: "page3" },//设置namne
{ path: "/page4", component: page4, name: "page4" }
]
var router = new VueRouter({
routes
})
var vm = new Vue({
el: "#app",
router,
});
</script>
</body>
</html>
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
