Vue 漸進式JavaScript 框架 基于Vue2的學習筆記 -?Vue-route重定向和聲明式導航

目錄

Vue-route路由

重定向

首頁默認訪問

不存在匹配

聲明式導航

路由原理

使用示例

自定義class類

Tag設置

版本4路由

改變

示例

總結

---

Vue-route路由

重定向

首頁默認訪問

希望訪問網站域名時，直接訪問film組件。

在router/index.js中配置根路徑默認組件.

示例如下：

// 配置表
const routes = [{path: '/filems',name: 'filems',component: Films},{path: '/cinemas',name: 'cinemas',component: Cinemas},{path: '/center',name: 'center',component: Center},{path: '/',name: 'films',component: Films}
]

不存在匹配

當輸入不存在的路徑時，匹配所有路徑。

示例如下：

{path: '/',name: 'films',component: Films},{path: '*',component: Films}

按照從上到下的順序進行匹配。

聲明式導航

監聽路由改變，來實現導航高亮。

路由原理

1.hash路由 location.hash 切換

window.onhashchange 監聽路徑的切換

2.history路由 ?hostory.pushState 切換

window.onpopstate 監聽路徑的切換

使用示例

使用router-link替換原來的a標簽來實現跳轉；

并給跳轉后的路徑設置樣式。

點擊后，當前路由上自動加上類。

示例如下：

<template><div><ul><li><router-link to="films">電影</router-link></li><li><router-link to="cinemas">影院</router-link></li><li><router-link to="center">我的</router-link></li></ul><!-- 路由容器 --><router-view></router-view></div>
</template>
<script>
export default {data () {return {}}
}
</script>
<style lang="scss" scoped>
.router-link-active {color: red;
}
</style>

效果：

自定義class類

可以在router-link上自定義class類，在渲染后也可以應用上。

示例如下：

<template><div><ul><li><router-link to="films" active-class="testActive">電影</router-link></li><li><router-link to="cinemas">影院</router-link></li><li><router-link to="center">我的</router-link></li></ul><!-- 路由容器 --><router-view></router-view></div>
</template>
<script>
export default {data () {return {}}
}
</script>
<style lang="scss" scoped>
.router-link-active {color: red;
}
.testActive {font-size:20px;
}
</style>

Tag設置

Tag設置渲染元素，不設置默認渲染為a標簽。

示例如下：

<template><div><ul><!-- 聲明式導航 （3之前 包含3） --><li><router-link to="films" active-class="testActive" tag="li">電影</router-link></li><li><router-link to="cinemas">影院</router-link></li><li><router-link to="center">我的</router-link></li></ul><!-- 路由容器 --><router-view></router-view></div>
</template>

版本4路由

改變

4之后這個語法就不好用了，需要修改為：

?

示例

把原來的導航改為版本4的導航。

示例如下：

<!-- 版本4 導航 --><ul><router-link to="films" custom v-slot="{navigate, isActive}"><li @click="navigate" :class="isActive?'testActive':''">電影</li></router-link><router-link to="cinemas" custom v-slot="{navigate, isActive}"><li @click="navigate" :class="isActive?'testActive':''">影院</li></router-link><router-link to="center" custom v-slot="{navigate, isActive}"><li @click="navigate" :class="isActive?'testActive':''">我的</li></router-link></ul>

總結

Vue 漸進式JavaScript 框架 基于Vue2的學習筆記 -?Vue-route重定向和聲明式導航