路由
- 前端路由：根據(jù)不同的path，顯示不同的組件
-
- 漸進(jìn)性框架：
- (1). 路由功能 是以 vue 插件的形式 灌入Vue函數(shù)上 （vue.js核心包撞羽，沒有路由）
- (2). 路由功能 單獨(dú) 拿出來 vueRouter(插件的形式灌入Vue構(gòu)造函數(shù))
- (3). 路由 用于構(gòu)建 spa （單頁面應(yīng)用） 應(yīng)用
分析單頁面應(yīng)用的優(yōu)劣勢
- 優(yōu)勢: 單頁面應(yīng)用祟印，在我們“頁面”（地址改變）同波，不會重新加載 另一個(gè)html撑教，只是切換路由顯示。隱藏侮东，頁面切換速度以及 不同頁面加載很快
- 劣勢: 對于seo不友好,無法抓取頁面結(jié)構(gòu)（解決方式利用vue圈盔，ssr服務(wù)端渲染）
<!-- 在 Vue 后面加載 vue-router，它會自動(dòng)安裝的： -->
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<!-- 使用 router-link 組件來導(dǎo)航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認(rèn)會被渲染成一個(gè) `<a>` 標(biāo)簽 -->
<!-- 通過設(shè)置tag屬性來改變r(jià)outer-link的默認(rèn)樣式 -->
<router-link to="/home" tag="button">Go To Home</router-link>
<router-link to="/news">Go To News</router-link>
<!-- 想要顯示對應(yīng)的路由苗桂，還需要路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
</div>
<template id="home">
<h2>Home頁組件</h2>
</template>
<template id="news">
<h2>News頁組件</h2>
</template>
</body>
<script>
//定義組件,路由切換時(shí)顯示對應(yīng)的組件
let Home = {
template:'#home'
}
let News = {
template:'#news'
}
//定義路由药磺，每個(gè)路由都應(yīng)該映射一個(gè)組件。有path屬性煤伟，component是對應(yīng)的組件
const routes = [
{
path:'/home',
component:Home
},
{
path:'/news',
component:News
}
]
//創(chuàng)建路由實(shí)例癌佩，然后傳routes配置規(guī)則
const router = new VueRouter({
routes //縮寫，相當(dāng)于routes：routes,在這里使用定義好的路由規(guī)則
})
// 通過注入路由器便锨，我們可以在任何組件內(nèi)通過 this.$router 訪問路由器围辙，
// 也可以通過 this.$route 訪問當(dāng)前路由：
let vm = new Vue({
el:'#app',
router //這里將路由掛載到實(shí)例上
})
</script>
動(dòng)態(tài)路由
<style>
.router-link-active {
background: cadetblue;
}
</style>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 出口 -->
<router-view></router-view>
<!-- 使用 router-link 組件來導(dǎo)航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認(rèn)會被渲染成一個(gè) `<a>` 標(biāo)簽 -->
<!-- 通過設(shè)置tag屬性來改變r(jià)outer-link的默認(rèn)樣式 -->
<router-link to="/home" tag="button">Go To Home</router-link>
<router-link to="/news">Go To News</router-link>
</div>
<template id="home">
<h2>Home頁組件</h2>
</template>
<template id="news">
<h2>News頁組件
<router-link to="/news/1">
我是新聞1
</router-link>
<router-link to="/news/2">
我是新聞2
</router-link>
<router-link to="/news/3">
我是新聞3
</router-link>
</h2>
</template>
</body>
<script>
//定義組件,路由切換時(shí)顯示對應(yīng)的組件
let Home = {
template:'#home'
}
let News = {
template:'#news'
}
//匹配404頁面
let NotFound = {
template:`
<h1>404</h1>
`
}
//定義一個(gè)新聞詳情子組件
let NewsSon = {
template:`
<div>
<h2>新聞詳情</h2>
</div>
`,
mounted(){
//在這里獲取到動(dòng)態(tài)路由傳的參數(shù)，及:id
console.log(this.$route.params.id);
}
}
//定義路由
const routes = [
{
path:'/news',
component:News
},
{
//重定向
path:'/',
redirect:'/news'
},
{
// 動(dòng)態(tài)路徑參數(shù) 以冒號開頭
path:'/news/:id',
component: NewsSon
},
{
//匹配404頁面放案，該路由最好放在最末尾
path:'*',
component:NotFound
}
]
//路由實(shí)例化
const router = new VueRouter({
routes //定義路由規(guī)則
})
let vm = new Vue({
el:"#app",
router //掛載路由
})
/*
hash路由
根據(jù) 地址 的hash值得變化 來 切換不同組件
window.addEvenetListener("hashchange",()=>{
// 監(jiān)聽地址欄 hash值變化
})
*/
</script>
監(jiān)聽動(dòng)態(tài)路由參數(shù)變化以及匹配404頁面和重定向
- 監(jiān)聽動(dòng)態(tài)路由參數(shù)變化
//定義一個(gè)新聞詳情子組件
let NewsSon = {
template:`
<div>
<h2>新聞詳情</h2>
</div>
`,
mounted(){
//在這里獲取到動(dòng)態(tài)路由傳的參數(shù)姚建，及:id
console.log(this.$route.params.id);
},
watch:{
//復(fù)用組件時(shí)，想對路由參數(shù)的變化作出響應(yīng)的話吱殉，watch (監(jiān)測變化) $route 對象：
$route(to,from){
console.log(to); //目標(biāo)路由
console.log(from); //上一個(gè)路由
}
}
}
let News = {
template: `
<div>
<h1>
新聞頁
</h1>
</div>
`
}
//匹配404頁面
let NotFound = {
template:`
<h1>404</h1>
`
}
// 定義路由
const routes = [
{
path:'/',
//重定向到news頁
redirect:'/news'
},
{
path:'/news',
//命名路由即給路由定義個(gè)name
name:'新聞',
component:News
},
{
path:'/news/:id',
component:NewsSon
},
{
path:'*',
component:NotFound
}
]
路由嵌套
- 重點(diǎn)：
- 1掸冤，二級路由的path 最好 包含一級路由path
- 2，一定在要 二級路由對于的一級路由 模板 中 寫出口 router-view
- 案例分析：
<style>
.router-link-active {
background: cadetblue;
}
.router-link-exact-active {
background: tan;
}
</style>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link tag="button" to="/home">home頁</router-link>
<router-link tag="button" to="/news">新聞頁</router-link>
<!-- 出口 -->
<router-view></router-view>
</div>
<template id="news">
<div>
<router-link to="/news/native">國內(nèi)新聞</router-link>
<router-link to="/news/abroad">國外新聞</router-link>
<h1>
我是news頁
<!-- 這里也需要路由的出口標(biāo)簽 -->
<router-view></router-view>
</h1>
</div>
</template>
</body>
<script>
//定義組件
let Home = {
template: `
<div>
<h1>
我是home頁
</h1>
</div>
`
}
let News = {
template: '#news'
}
//定義兩個(gè)新聞子組件
const NativeNews = {
template:`
<div>
<h2>國內(nèi)新聞?wù)故?lt;/h2>
</div>
`
}
const AbroadNews = {
template:`
<div>
<h2>國外新聞?wù)故?lt;/h2>
</div>
`
}
//定義路由
const routes = [
{
path:'/',
//重定向到home頁
redirect:'/home'
},
{
path:'/home',
component:Home
},
{
path:'/news',
component:News,
//新聞頁里面有子路由
children:[
{
path:'/news/native',
component:NativeNews
},
{
path:'/news/abroad',
component:AbroadNews
}
]
},
]
//路由實(shí)例化
const router = new VueRouter({
routes
})
let vm = new Vue({
el: '#app',
router
})
</script>
