Vue Router官网：
https://router.vuejs.org/zh/installation.html
组件的停地切换也能实现页面切换的效果。
但路由的作用可以定位到具体的链接地址，打开指定的页面，而不是每次分享给其他人都是首页面。
因为在项目创建时已经选择导入vue-router包，所以不需要再去引入该js框架。
系统生成的demo如下（/router/router.js）
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
该配置文件，可以精简为如下样式：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
routes: [{
path: '/',
name: 'Home',
component: ''
}]
})
改动router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Film from '@/views/Film.vue'
import Cinema from '@/views/Cinema.vue'
import Center from '@/views/Center.vue'
Vue.use(VueRouter) // 注册路由模块，让插件工作起来
export default new VueRouter({
routes: [{
path: '/film',
component: Film
}, {
path: '/cinema',
component: Cinema
}, {
path: '/center',
component: Center
}]
})
在views下创建3个vue文件
Center.vue
<template>
<div>
<h1>Center</h1>
</div>
</template>
Cinema.vue
<template>
<div>
<h1>Cinema</h1>
</div>
</template>
Film.vue
<template>
<div>
<h1>Film</h1>
</div>
</template>
运行项目直接输入地址:
http://localhost:8081/#/Cinema
image.png
新建一个组件：
Components/Tabbar.vue
<template>
<nav>
<ul>
<li>
<a href="/film">电影</a>
</li>
<li>
<a href="/cinema">影院</a>
</li>
<li>
<a href="/center">我的</a>
</li>
</ul>
</nav>
</template>
修改App.vue
<template>
<div id="app">
<div id="nav"><tabbar></tabbar></div>
<router-view />
</div>
</template>
<script>
import tabbar from '@/components/Tabbar'
export default {
components: {
tabbar
},
data () {
return {}
}
}
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
这时候发现并没有如我们想象的那样跳转，出现如下的链接地址：
http://localhost:8081/Cinema#/
而且页面无法访问。
这里涉及到路由的原理：
1.hash路由：（#/home）
location.hash切换
window.onhashchange监听路径的切换。
2.history路由(/home)
声明式导航
也就是如下的代码形式：
会被默认渲染成a标签
image.png
可以看到渲染之后逇效果：
image.png
也可以修改成其他标签。
修改componets/Tabbar.vue
<template>
<nav>
<ul>
<router-link to="/film" tag='li'>电影</router-link>
<router-link to="/cinema" tag='li'>影院</router-link>
<router-link to="/center" tag='li'>我的</router-link>
</ul>
</nav>
</template>
就会变成如下效果和代码源码：
image.png
image.png
也可以设置动态选中时的class属性：
修改componets/Tabbar.vue
<template>
<nav>
<ul>
<router-link to="/film" tag="li" active-class="active">电影</router-link>
<router-link to="/cinema" tag="li" active-class="active">影院</router-link>
<router-link to="/center" tag="li" active-class="active">我的</router-link>
</ul>
</nav>
</template>
<style lang="scss" scoped>
.active {
color: red;
}
</style>
image.png
重定向问题
语法如下：
{
pthc:"*",
redirect:"/home"
}
修改路由：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Film from '@/views/Film.vue'
import Cinema from '@/views/Cinema.vue'
import Center from '@/views/Center.vue'
Vue.use(VueRouter) // 注册路由模块，让插件工作起来
export default new VueRouter({
routes: [{
path: '/film',
component: Film
}, {
path: '/cinema',
component: Cinema
}, {
path: '/center',
component: Center
}, {
path: '/',
redirect: '/film'
}]
})
浏览器输入网址：
http://localhost:8081/
会自动修正链接到：
http://localhost:8081/#/film
嵌套路由
修改路由
src\router\index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Film from '@/views/Film.vue'
import Cinema from '@/views/Cinema.vue'
import Center from '@/views/Center.vue'
import Nowplaying from '@/views/film/Nowplaying'
import Comingsoon from '@/views/film/Comingsoon'
Vue.use(VueRouter) // 注册路由模块，让插件工作起来
export default new VueRouter({
routes: [{
path: '/film',
component: Film,
children: [{
path: 'nowplaying',
component: Nowplaying
},
{
path: 'comingsoon',
component: Comingsoon
}
]
}, {
path: '/cinema',
component: Cinema
}, {
path: '/center',
component: Center
}, {
path: '/',
redirect: '/film'
}]
})
新增3个vue文件
src\views\film\Comingsoon.vue
<template>
<div>
<h1>Comingsoon</h1>
<div></div>
</div>
</template>
src\views\film\Nowplaying.vue
<template>
<div>
<h1>Nowplaying</h1>
<div></div>
</div>
</template>
src\views\film\FilmNav.vue
<template>
<div>
<div>
<router-link to="/film/nowplaying" tag="li" active-class="active">正在热映</router-link>
<router-link to="/film/comingsoon" tag="li" active-class="active">即将上映</router-link>
</div>
</div>
</template>
<style lang="scss" scoped>
.active {
color: red;
}
</style>
修改Film.vue
src\views\Film.vue
<template>
<div>
<h1>Film组件的轮播</h1>
<filmnav></filmnav>
<div>
<router-view></router-view>
<!-- 路由容器 -->
</div>
</div>
</template>
<script>
import filmnav from '@/views/film/FilmNav'
export default {
components: {
filmnav
}
}
</script>
image.png
动态路由以及传参
修改Nowplaying.vue
src\views\film\Nowplaying.vue
<template>
<div>
<h1>Nowplaying</h1>
<ul>
<li v-for="item in dataList" :key="item" @click="handleClick">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
dataList: ['1111', '2222', '3333']
}
},
methods: {
handleChick () {
// 跳转路由
this.$router.push('/detail')
}
}
}
</script>
修改路由,增加：
{
path: '/detail',
component: Detail
}
src\router\index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Film from '@/views/Film.vue'
import Cinema from '@/views/Cinema.vue'
import Center from '@/views/Center.vue'
import Nowplaying from '@/views/film/Nowplaying'
import Comingsoon from '@/views/film/Comingsoon'
import Detail from '@/views/Detail'
Vue.use(VueRouter) // 注册路由模块，让插件工作起来
export default new VueRouter({
routes: [{
path: '/film',
component: Film,
children: [{
path: 'nowplaying',
component: Nowplaying
},
{
path: 'comingsoon',
component: Comingsoon
}
]
}, {
path: '/cinema',
component: Cinema
}, {
path: '/center',
component: Center
}, {
path: '/detail',
component: Detail
}, {
path: '/',
redirect: '/film'
}]
})
image.png
点击任何一个数组：
image.png
获取动态路由的参数，修改src\views\film\Nowplaying.vue
<template>
<div>
<h1>Nowplaying</h1>
<ul>
<li v-for="item in dataList" :key="item" @click="handleClick(item)">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
dataList: ['1111', '2222', '3333']
}
},
methods: {
handleClick (id) {
// debugger
// 跳转路由
// this.$router.push('/detail')
this.$router.push(`/detail/${id}`)
}
}
}
</script>
就会加载如下链接：
http://localhost:8081/#/detail/1111
取值：
修改路由内容：
{
path: '/detail/:id',
component: Detail
}
这里id只是占位符，可以换成任何单词。
修改src\views\Detail.vue
<template>
<div>
<h1>Detail</h1>
</div>
</template>
<script>
export default {
mounted () {
// 获取动态路由的参数
console.log(this.$route.params.id)
}
}
</script>
image.png
