路由使用的module是vue-router，在脚手架创建项目的时候，已经下载好了
一级路由配置
1.配置路由文件
//===>src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Film from '@/views/Film'
import Cinema from '@/views/Cinema'
import Center from '@/views/Center'
Vue.use(VueRouter)
const routes = [
{
path: '/film',
component: Film
},
{
path: '/cinema',
component: Cinema
},
{
path: '/center',
component: Center
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
2.新建Film、Cinema、Center三个组件
//===>src/views/Center.vue
<template>
<div>
Center
</div>
</template>
<script>
export default {
}
</script>
<style lang="sass" scoped>
</style>
//===>src/views/Cinema.vue
<template>
<div>
Cinema
</div>
</template>
<script>
export default {
}
</script>
<style lang="sass" scoped>
</style>
//===>src/views/Film.vue
<template>
<div>
Film
</div>
</template>
<script>
export default {
}
</script>
<style lang="sass" scoped>
</style>
3.路由展示位置
//===>src/App.vue
<template>
<div>
hello vue
<!-- 路由容器 -->
<router-view></router-view>
...
</div>
</template>
运行一下试试
路由声明式导航
1.src/App.vue
<template>
<div>
<tabbar />
<!-- 路由容器 -->
<router-view></router-view>
<!-- <input type="text" ref="mytext" />
<button @click="handleAdd()">add</button>
<ul>
<li v-for="data in datalist" :key="data">{{data}}</li>
</ul>
<navbar>
<button @click="isShow=!isShow">navbar-click</button>
</navbar>
<sidebar v-show="isShow"></sidebar>-->
</div>
</template>
<script>
import navbar from "./components/Navbar";
import sidebar from "./components/Sidebar";
import axios from "axios";
import tabbar from "@/components/Tabbar";
export default {
data() {
...
},
methods: {
...
},
mounted() {
...
},
components: {
navbar: navbar,
sidebar: sidebar,
tabbar
}
};
</script>
<style lang='scss' scoped>
...
</style>
2.编写Tabber.vue导航栏组件
router-link：路由组件
to：想要跳转的路由地址
tag：想要变成什么标签
activeClass：选中路由高亮显示
//===>src/components/Tabbar.vue
<template>
<nav>
<ul>
<router-link to="/film" tag="li" activeClass="myactive">film</router-link>
<router-link to="/cinema" tag="li" activeClass="myactive">cinema</router-link>
<router-link to="/center" tag="li" activeClass="myactive">center</router-link>
</ul>
</nav>
</template>
<style lang="scss" scoped>
.myactive {
color: red;
}
</style>
3.因为在上个小例子中，已经在src/router/index.js文件中，写好了路由的相关配置，所以可以找到对应路径的。
4.运行项目。运行项目时，项目在src/main.js中找到了route了，所以能跑起来组件中的router-link路由
image.png
二级路由以及重定向
二级路由
1.配置路由文件
//===>src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Film from '@/views/Film'
import Cinema from '@/views/Cinema'
import Center from '@/views/Center'
import Nowplaying from '@/views/Film/Nowplaying'
import Comingsoon from '@/views/Film/Comingsoon'
Vue.use(VueRouter)
const routes = [
{
path: '/film',
component: Film,
children: [
{
path: 'nowplaying',
component: Nowplaying
}, {
path: 'comingsoon',
component: Comingsoon
}
]
},
{
path: '/cinema',
component: Cinema
},
{
path: '/center',
component: Center
}, {
path: '*',
component: Film
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
2.创建Nowplaying和Comingsoon组件
//===>src/views/Film/Comingsoon.vue
<template>
<div>
comingsoon
</div>
</template>
//===>src/views/Film/Nowplaying.vue
<template>
<div>
nowplaying
</div>
</template>
3.配置路由要显示的地方
//===>src/views/Film.vue
<template>
<div>
<div>轮播</div>
<div>film-header</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style lang="sass" scoped>
</style>
二级路由
重定向
1.修改路由文件
//===>src/router/index.js
...
const routes = [
{
path: '/film',
component: Film,
children: [
{
path: 'nowplaying',
component: Nowplaying
}, {
path: 'comingsoon',
component: Comingsoon
}, {
path: '',
redirect: '/film/nowplaying'
}
]
},
...
]
...
重定向
网友评论