1.vue-router及相关知识概述
1.1什么是路由
路由（routing）:
是指分组从源到目的地时，决定端到端路径的网络范围的进程。
是指路由器从一个接口上收到数据包，根据数据包的目的地址进行定向并转发到另一个接口的过程。
1.2什么是路由器
路由器（Router）
又称网关设备（Gateway）
是连接因特网中各局域网、广域网的设备，它会根据信道的情况自动选择和设定路由，以最佳路径，按前后顺序发送信号。
路由器是互联网络的枢纽，是互联网的主要结点设备, "交通警察"。
路由器:管理路由的设备
后台路由:处理请求的回调函数
前台路由:组件
1.3vue-router概述
1) 官方提供的用来实现 SPA 的 vue 插件
2) github: https://github.com/vuejs/vue-router
3) 中文文档: http://router.vuejs.org/zh-cn/
4) 下载: npm install vue-router --save
1.4相关api
1) VueRouter(): 用于创建路由器的构建函数
new VueRouter({
// 多个配置项
})
2) 路由配置
routes: [
{ // 一般路由
path: '/about',
component: About
},
{ // 自动跳转路由
path: '/',
redirect: '/about'
}
]
3) 注册路由器
import router from './router'
new Vue({
router
})
4) 使用路由组件标签
1. <router-link>: 用来生成路由链接
<router-link to="/xxx">Go to XXX</router-link>
2. <router-view>: 用来显示当前路由组件界面
<router-view></router-view>
1.5编写使用路由的 3 步
1) 定义路由组件
2) 注册路由
3) 使用路由
<router-link>
<router-view>
1.6配置嵌套路由
配置嵌套路由: router.js
path: '/home',
component: home,
children: [
{
path: 'news',
component: News
},
{
path: 'message',
component: Message
}
]
1.7向路由组件传递数据
1.7.1方式 1: 路由路径携带参数(param/query)
1) 配置路由
children: [
{
path: 'mdetail/:id',
component: MessageDetail
}
]
2) 路由路径
<router-link :to="'/home/message/mdetail/'+m.id">{{m.title}}</router-link>
3) 路由组件中读取请求参数
this.$route.params.id
1.7.2方式 2: <router-view>属性携带数据
<router-view :msg="msg"></router-view>
1.8缓存路由组件对象
<keep-alive>
<router-view></router-view>
</keep-alive>
1.9编程式路由导航
1) this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
2) this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
3) this.$router.back(): 请求(返回)上一个记录路由
4) this.$router.go(-1): 请求(返回)上一个记录路由
5) this.$router.go(1): 请求下一个记录路由
2.demo-vue-router
图片.png
2.1index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="./static/css/bootstrap.css">
<title>vue_demo</title>
<style>
.router-link-active {
color: red !important;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2.2main.js
import Vue from 'vue'
import App from './App'
import router from './router/index'
let vm = new Vue({ // 配置對象的屬性名都是一些固定的屬性名,不能隨意修改
el: '#app',
components: {
App // 映射组件标签
},
template: '<app/>', // 指定需要渲染到页面的模板
router: router
})
Vue.use({
vm
})
2.3index.js
/*
*
* 路由器模塊
*
* */
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About'
import Home from '../views/Home'
import News from '../views/News'
import Message from '../views/Message'
import MessageDetail from '../views/MessageDetail'
Vue.use(VueRouter)
export default new VueRouter({ // 路由器
// 定義多個路由,即註冊路由
routes: [ // 基本路由組件
{
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [ // 嵌套路由組件
{
path: '/home/news', // 絕對路徑的寫法
component: News
},
{
path: 'message', // 相對路徑的寫法
component: Message,
children: [
{
path: 'detail/:id', // 運用佔位符來動態匹配路徑
component: MessageDetail
}
]
},
{
path: '', // 默認請求路徑地址
redirect: 'news'
}
]
},
{
path: '/', // 默認根路徑請求地址
redirect: '/home'
}
]
})
2.4App.vue
<template>
<div>
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Router Test</h2></div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!--生成路由链接-->
<router-link to="/home" class="list-group-item">Home</router-link>
<router-link to="/about" class="list-group-item">About</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!--显示当前组件-->
<keep-alive> <!-- keep-alive緩存路由組件對象 -->
<router-view msg="abc"></router-view>
</keep-alive>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
components: {
}
}
</script>
<style scoped>
</style>
2.5About.vue
<template>
<div>
<h2>about</h2>
<p>{{msg}}</p>
<input type="text"/>
</div>
</template>
<script>
export default {
props: {
msg: String
}
}
</script>
<style scoped>
</style>
2.6Home.vue
<template>
<div>
<h2>Home</h2>
<div>
<ul class="nav nav-tabs">
<li><router-link to="/home/news">News</router-link></li>
<li><router-link to="/home/message">Message</router-link></li>
</ul>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
2.7News.vue
<template>
<div>
<ul>
<li v-for="(news, index) in newsArr" :key="index">{{news}}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
newsArr: ['news01', 'news02', 'news03', 'news04']
}
}
}
</script>
<style scoped>
</style>
2.8Message.vue
<template>
<div>
<ul>
<li v-for="(message, index) in messages" :key="message.id">
<router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link>
<button @click="pushShow(message.id)">push查看</button>
<button @click="replaceShow(message.id)">replace查看</button>
</li>
</ul>
<button @click="$router.back()">回退</button>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
messages: []
}
},
mounted () {
// 模擬ajax請求從後台獲取數據:異步獲取
setTimeout(() => {
const messages = [
{
id: 1,
title: 'message01'
},
{
id: 2,
title: 'message02'
},
{
id: 3,
title: 'message03'
}
]
this.messages = messages
}, 1000)
},
methods: {
pushShow (id) {
this.$router.push('/home/message/detail/`{id}`')
},
replaceShow (id) {
this.$router.replace('/home/message/detail/`{id}`')
}
}
}
</script>
<style scoped>
</style>
2.9MessageDetail.vue
<template>
<ul>
<li>id: {{$route.params.id}}</li>
<li>title: {{detail.title}}</li>
<li>content: {{detail.content}}</li>
</ul>
</template>
<script>
const messageDetails = [
{id: 1, title: 'm1', content: 'm1--hello'},
{id: 2, title: 'm2', content: 'm2--hello'},
{id: 3, title: 'm3', content: 'm3--hello'}
]
export default {
data () {
return {
detail: {}
}
},
mounted () { // 改变当前路由组件参数数据时, 不会重新创建组件对象, mounted不会重新执行
const id = this.$route.params.id
this.detail = messageDetails.find(detail => detail.id === id * 1) // 乘以1是為了改變數據類型
},
watch: {
$route: function () { // 改变当前路由组件参数数据时自动调用
console.log('$route()')
const id = this.$route.params.id
this.detail = messageDetails.find(detail => detail.id === id * 1)
}
}
}
</script>
<style scoped>
</style>
