路由图解:
(1)路由概念
路由就是一组key-value的对应关系。
多个路由,需要经过路由器管理。
(2)路由分类
前端路由:
1) 理由:value是component,用于展示页面内容。
2)工作过程:当浏览器的路径改变时,对应的组件就会显示。
后端路由:
1)理解:value是function,用于处理客户端提交。
2)工作过程:服务器收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据。
router-link :实现路由的切换。
注意:路由里面没有用常用的a标签跳转页面,而是使用了一个自定义组件
router-link
来创建链接。router-view :指定组件的呈现位置。
(3)基本使用
效果:点击About,会显示我是About的内容,若点击Home,会显示我是Home的内容。
main.js 配置
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(VueRouter)
//创建vm
const vm = new Vue({
el: '#app',
render: h => h(App),
router: router
})
page文件包: About.vue和Home.vue
About.vue
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name:'About',
beforeDestroy(){
console.log('About组件即将被销毁了');
},
mounted(){
console.log('About组件被挂载完毕了');
}
}
</script>
Home.vue
<template>
<h2>我是Home的内容</h2>
</template>
<script>
export default {
name:'Home',
beforeDestroy(){
console.log('Home组件即将被销毁了');
},
mounted(){
console.log('Home组件被挂载完毕了');
}
}
</script>
router文件包: index.js
//该文件用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
//创建一个路由器,并暴露
export default new VueRouter({
routes: [{
path: '/about',
component: About
},
{
path: '/home',
component: Home
},
]
})
App.vue
<template>
<div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- 指定组件的呈现位置 -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'App',
}
</script>
(4)命名路由
为任何路由提供
name
。优点:
- 没有硬编码的 URL。
params
的自动编码/解码。- 防止你在 url 中出现打字错误。
- 绕过路径排序(如显示一个)。
基础使用(定义路由的js文件)
const routes = [
{
path: '/user/:username',
name: 'user',
component: User
}
]
链接到一个路由的命名,可以直接使用name来指定。
<router-link :to="{ name: 'user', params: { username: 'erina' }}">
User
</router-link>