一、路由简介
1、概念:路由就是SPA(单页应用)的路径管理器
2、路由分类:
-
Hash模式:vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 hash(#)是URL 的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页,也就是说 #是用来指导浏览器动作的,对服务器端完全无用,HTTP请求中也不会不包括#;同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置;所以说Hash模式通过锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据
-
History模式:由于hash模式会在url中自带#,如果不想要很丑的 hash,我们可以用路由的 history 模式,只需要在配置路由规则时,加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
const router = new VueRouter({routes, mode:'hash|history|abstract',})
3、路由作用
-
根据url锚点路径,在容器中加载不同的模块(组件),本质作用是做网页导航
-
完成SPA(单页面应用)的开发。它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的 HTML、JavaScript、CSS。
-
一旦页面加载完成,SPA不会因为用户的操作而进行页面的重新加载或跳转,而是利用JavaScript动态的变换HTML(采用的是div切换显示和隐藏),从而实现UI与用户的交互
4、路由功能的引入
Vue本身并没有提供路有机制,但是官方以插件(vuerouter)的形式提供了对路由的支持
-
路由官网:Vue Router
-
直接下载 : https://unpkg.com/vue-router@3.0.1/dist/vue-router.js使用 vue-router.js 库来引入路由功能模块
-
通过脚手架引入
二、一级路由
1、核心组件
router-link
:这使得 Vue Router 可以在不重新加载页面的情况下更改 URL,处理 URL 的生成以及编码。
router-view
将显示与 url 对应的组件。你可以把它放在任何地方,以适应你的布局。
2、创建过程
-
准备三模板元素,作为每个路由加载的内容
-
创建路由对象,并绑定模板元素
-
创建路由链接router-link
-
创建路由router-view
3、创建模板元素
引入vue-router.js
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
准备三个模板元素,构造三个组件,用来路由加载的内容
<!-- 1、定义路由组件 -->
<template id="home">
<div>
<h1>主页</h1>
</div>
</template>
<template id="news">
<div>
<h1>新闻</h1>
</div>
</template>
<template id="blog">
<div>
<h1>博客</h1>
</div>
</template>
4、创建路由对象,并挂到Vue实例
注意第四行是配置的是routes
,不要快捷方式提示错了
<script>
// 2. 创建 router 实例,并配置 `routes`
const router = new VueRouter({
routes: [{
path: "/home",
component: {
template: "#home"
}
}, {
path: "/news",
component: {
template: "#news"
}
}, {
path: "/blog",
component: {
template: "#blog"
}
}]
})
// 3 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
var vm = new Vue({
el: "#app",
data: {},
router: router
})
</script>
5、使用 router-link 组件来导航
<div id="app">
<!-- 3、使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
<router-link to="/blog">博客</router-link>
</div>
6、配置路由出口
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
7、完整示例
<body>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
<div id="app">
<!-- 3、使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<ul>
<li>
<router-link to="/home">主页</router-link>
</li>
<li>
<router-link to="/news">新闻</router-link>
</li>
<li>
<router-link to="/blog">博客</router-link>
</li>
</ul>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<!-- 1、定义路由组件 -->
<template id="home">
<div>
<h1>主页</h1>
</div>
</template>
<template id="news">
<div>
<h1>新闻</h1>
</div>
</template>
<template id="blog">
<div>
<h1>博客</h1>
</div>
</template>
<script>
// 2. 创建 router 实例,并配置 `routes`
const router = new VueRouter({
routes: [{
path: "/home",
component: {
template: "#home"
}
}, {
path: "/news",
component: {
template: "#news"
}
}, {
path: "/blog",
component: {
template: "#blog"
}
}]
})
// 3 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
var vm = new Vue({
el: "#app",
data: {},
router: router,
mounted() {
this.$router.push("/home")
},
})
</script>
</body>
<style>
#app {
height: 30px;
width: 100%;
background-color: #c00;
}
#app ul {
margin: 0 0 0 30px;
padding: 0px;
font-size: 12px;
color: #fff;
line-height: 30px;
white-space: nowrap;
}
#app li {
list-style-type: none;
display: inline;
}
#app li a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 7px 10px;
color: #fff;
}
#app li a:hover {
color: #ff0;
background-color: #f00;
}
</style>
</html>
三、二级路由
一级路由的某个组件中又包含了一个导航,则可以使用二级路由实现
1、创建模板元素
在上面例子的基础上添加两个模板
<!-- 1、定义路由组件 -->
<template id="inNews">
<div>
<h1>国内新闻</h1>
</div>
</template>
<template id="outNews">
<div>
<h1>国际新闻</h1>
</div>
</template>
2、创建路由对象,并挂到Vue实例
修改news,添加children
// 2. 创建 router 实例,并配置 `routes`
const router = new VueRouter({
routes: [{
path: "/home",
component: {
template: "#home"
}
}, {
path: "/news",
component: {
template: "#news"
},
children: [{
path: "/inNews",
component: {
template: "#inNews"
}
},
{
path: "/outNews",
component: {
template: "#outNews"
}
}
]
}, {
path: "/blog",
component: {
template: "#blog"
}
}]
})
3、修改news模板,使用 router-link 组件来导航
也需要添加router-view
<template id="news">
<div>
<ul>
<li>
<router-link to="/inNews">国内新闻</router-link>
</li>
<li>
<router-link to="/outNews">国际新闻</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</template>
4、完整示例
<body>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
<div id="app">
<!-- 3、使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<ul>
<li>
<router-link to="/home">主页</router-link>
</li>
<li>
<router-link to="/news">新闻</router-link>
</li>
<li>
<router-link to="/blog">博客</router-link>
</li>
</ul>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<!-- 1、定义路由组件 -->
<template id="home">
<div>
<h1>主页</h1>
</div>
</template>
<template id="news">
<div>
<ul>
<li>
<router-link to="/inNews">国内新闻</router-link>
</li>
<li>
<router-link to="/outNews">国际新闻</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</template>
<template id="blog">
<div>
<h1>博客</h1>
</div>
</template>
<template id="inNews">
<div>
<h1>国内新闻</h1>
</div>
</template>
<template id="outNews">
<div>
<h1>国际新闻</h1>
</div>
</template>
<script>
// 2. 创建 router 实例,并配置 `routes`
const router = new VueRouter({
routes: [{
path: "/home",
component: {
template: "#home"
}
}, {
path: "/news",
component: {
template: "#news"
},
//注意children和component是同级,不能放到component里面去
children: [{
path: "/inNews",
component: {
template: "#inNews"
}
},
{
path: "/outNews",
component: {
template: "#outNews"
}
}
]
}, {
path: "/blog",
component: {
template: "#blog"
}
}]
})
// 3 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
var vm = new Vue({
el: "#app",
data: {},
router: router,
mounted() {
this.$router.push("/home")
},
})
</script>
</body>
</html>
5、命名路由及传递参数完整示例
<!DOCTYPE html>
<html>
<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></title>
</head>
<body>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
<div id="app">
<router-link to="/home/1">主页</router-link>
<router-link :to="{name:'h',params:{name: '1001'}}">主页2</router-link>
<router-link to="/news">新闻</router-link>
<router-link to="/blog">博客</router-link>
<router-view></router-view>
</div>
<template id="home">
<div>
<h1>主页</h1>
</div>
</template>
<template id="news">
<div>
<router-link to="/inNews">国内新闻</router-link>
<router-link to="/outNews">国际新闻</router-link>
<router-view></router-view>
</div>
</template>
<template id="blog">
<div>
<h1>博客</h1>
</div>
</template>
<template id="inNews">
<div>
<h1>国内新闻</h1>
</div>
</template>
<template id="outNews">
<div>
<h1>国际新闻</h1>
</div>
</template>
<script>
const router = new VueRouter({
routes:[
{
path:"/home/:name",
name:"h",
component:{
template:"#home",
mounted() {
alert(this.$route.params.name)
},
},
},
{
path:"/news",
component:{
template:"#news"
},
children:[
{
path:"/inNews",
component:{
template:"#inNews"
}
},
{
path:"/outNews",
component:{
template:"#outNews"
}
}
]
},
{
path:"/blog",
component:{
template:"#blog"
}
}
]
})
var vm = new Vue({
el: "#app",
data: {},
router:router
})
</script>
</body>
</html>