【Vue_04】路由
一、路由介绍
1. 什么是路由
路由的实质是一种对应关系，url 与资源之间的对应关系就是路由。 路由分为前端路由和后端路由，后端路由是由服务器完成转发，前端路由是hash(锚点)的变化实现的。
2. 原生实现路由
<div id="app">
<!-- tab栏 -->
<a href="#/tab1">tab1</a>
<a href="#/tab2">tab1</a>
<a href="#/tab3">tab1</a>
<!-- 组件占位符 -->
<component :is="name"></component>
</div>
<script>
// 组件
var tab1 = {
template : "<h1>tab1 内容</h1>"
}
var tab2 = {
template : "<h1>tab2 内容</h1>"
}
var tab3 = {
template : "<h1>tab3 内容</h1>"
}
// Vue实例
var app = new Vue({
el: "#app",
data: {
name: "tab1"
},
components: {
tab1,
tab2,
tab3
}
});
// 监听锚点变化
onhashchange = function() {
app.name = location.hash.slice(2);
}
</script>
在这里插入图片描述
二、Vue Router
1. Vue Router使用步骤
1.引入 vue.js、vue-router.js 文件。 2.使用 router-link 标签添加路由链接，默认会被渲染为 a 标签，to 属性默认被渲染为 href 属性，to 属性的值会被渲染为 # 开头的 hash 地址。 3.使用 router-view 标签添加路由填充位（路由占位符） 4.定义路由组件 5.创建路由实例并配置路由规则 6.将路由挂载到 Vue 实例中
2. Vue Router Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个程序</title>
<script src="vue.js" ></script>
<script src="vue-router_3.0.2.js"></script>
</head>
<body>
<div id="app">
<!-- 路由链接 -->
<router-link to="/tab1">标签1</router-link>
<router-link to="/tab2">标签2</router-link>
<router-link to="/tab3">标签3</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
// 路由组件
var tab1 = {
template : "<h1>王大锤</h1>"
}
var tab2 = {
template : "<h1>熏悟空</h1>"
}
var tab3 = {
template : "<h1>小仙女</h1>"
}
// 创建路由实例
var myRouter = new VueRouter({
routes: [
/*
每一个路由规则都是一个对象，对象中至少包含 path、component 两个属性
path：表示路由要匹配的 hash 地址, 当 path 设置为 "/" 时，表示初始地址
component：表示路由规则要匹配的路由组件
redirect：表示重定向到某锚点
*/
{path: "/", redirect: "/tab1"},
{path: "/tab1", component: tab1},
{path: "/tab2", component: tab2},
{path: "/tab3", component: tab3}
]
});
// Vue实例
var app = new Vue({
el: "#app",
// 将路由挂在到 Vue 实例
router: myRouter
});
</script>
</body>
</html>
在这里插入图片描述
3. 嵌套路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个程序</title>
<script src="vue.js" ></script>
<script src="vue-router_3.0.2.js"></script>
</head>
<body>
<div id="app">
<!-- 路由链接 -->
<router-link to="/tab1">标签1</router-link>
<router-link to="/tab2">标签2</router-link>
<router-link to="/tab3">标签3</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
// 路由组件
var tab1 = {
template : "<h1>王大锤</h1>"
}
var tab2 = {
template : `
<div>
子路由1 <br />
<router-link to="/son11">son11</router-link>
<router-link to="/son12">son12</router-link>
<router-view></router-view>
</div>
`
}
var tab3 = {
template : `
<div>
子路由2 <br />
<router-link to="/son21">son21</router-link>
<router-link to="/son22">son22</router-link>
<router-view></router-view>
</div>
`
}
// 定义子级路由组件
var son11 = {
template: "<h1>No.1 China</h1>"
}
var son12 = {
template: "<h1>No.1 中国</h1>"
}
var son21 = {
template: "<h1>No.2 SZ</h1>"
}
var son22 = {
template: "<h1>No.2 深圳</h1>"
}
// 创建路由实例
var myRouter = new VueRouter({
routes: [
// 路由规则
{path: "/", redirect: "/tab1"},
{path: "/tab1", component: tab1},
{
path: "/tab2",
component: tab2,
// 通过 children 来添加子级路由规则
children: [
{path: "/", redirect: "/son11"},
{path: "/son11", component: son11},
{path: "/son12", component: son12}
]
},
{
path: "/tab3",
component: tab3,
children: [
{path: "/", redirect: "/son21"},
{path: "/son21", component: son21},
{path: "/son22", component: son22}
]
}
]
});
// Vue实例
var app = new Vue({
el: "#app",
// 将路由挂在到 Vue 实例
router: myRouter
});
</script>
</body>
</html>
在这里插入图片描述
4. 动态路由
// 传递普通值
<div id="app">
<!-- 路由链接 -->
<router-link to="/tab/1">标签1</router-link>
<router-link to="/tab/2">标签2</router-link>
<router-link to="/tab/3">标签3</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
// 路由组件
var tab = {
props: ["id"],
template : "<h1>{{id}}号王大锤</h1>"
}
// 创建路由实例
var myRouter = new VueRouter({
routes: [
// props 设置为 true 时，才能开启传递，否则只能在组件中使用 $route.params.xx 获取值
{path: "/tab/:id", component: tab, props: true}
]
});
// Vue实例
var app = new Vue({
el: "#app",
// 将路由挂在到 Vue 实例
router: myRouter
});
</script>
// 传递对象
<div id="app">
<!-- 路由链接 -->
<router-link to="/tab/1">标签1</router-link>
<router-link to="/tab/2">标签2</router-link>
<router-link to="/tab/3">标签3</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
// 路由组件
var tab = {
props: ["name", "age", "id"],
template : "<h1>{{id}}号{{name}}有{{age}}岁</h1>"
}
// 创建路由实例
var myRouter = new VueRouter({
routes: [
// 若不需要传递 id 值，则只需要设置 props: {} 即可
{path: "/tab/:id", component: tab, props: (route) => {
return {name: "王大锤", age: 250, id: route.params.id};
}}
]
});
// Vue实例
var app = new Vue({
el: "#app",
// 将路由挂在到 Vue 实例
router: myRouter
});
</script>
在这里插入图片描述
5. 命名路由
<div id="app">
<!-- 路由链接 -->
<router-link to="/tab1">标签1</router-link>
<!-- 可以直接使用别名进行跳转 -->
<router-link :to="{name: 'routeName'}">标签2</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
// 路由组件
var tab1 = {
template : "<h1>11111111</h1>"
}
var tab3 = {
template : "<h1>33333333</h1>"
}
// 创建路由实例
var myRouter = new VueRouter({
routes: [
{path: "/tab1", component: tab1},
// name 属性可以给路由起别名
{path: "/tab3", component: tab3, name:"routeName"}
]
});
// Vue实例
var app = new Vue({
el: "#app",
// 将路由挂在到 Vue 实例
router: myRouter
});
</script>
在这里插入图片描述
6. 编程式导航
- 声明式与编程式的区别
使用 router-link 会在底层调用 router.push( )
声明式 | 编程式 |
|---|---|
router-link to=" " | router.push( ) |
示例
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录