vue init webpack vue-router-test
是否建立路由: 是css
在 component下建立 NavList 页面vue
<template> <div> <div class="navlist"> <ul> <li><router-link :to="index">首页</router-link></li> <li><router-link :to="course">课程</router-link></li> <li><router-link :to="master">专家</router-link></li> </ul> </div> </div> </template> <script> export default { name: "NavList", data() { return { index: "/", course: "/course", master: "/master", } } } </script> <style scoped> .navlist { width: 100%; height: 50px; background: #f1f1f1; } ul { list-style: none; } li { float: left; margin: 20px; } </style>
index.vue, master.vue, course.vue等, 仅展现 index.vuejava
<template> <div> <NavList/> 首页 </div> </template> <script> import NavList from "./NavList"; export default { name: "index", components: {NavList}, data() { return { } } } </script> <style scoped> </style>
import Vue from 'vue' import Router from 'vue-router' import index from '@/components/index' import Course from '@/components/course' import Master from '@/components/master' import Java from '@/components/course/java' import Python from '@/components/course/python' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'index', component: index }, { path: '/course', name: 'Course', component: Course, }, { path: '/master', name: "Master", component: Master } ] })
router-viewpython
<template> <div id="app"> <!--<img src="./assets/logo.png">--> <!--<NavList/>--> <router-view/> </div> </template>
有时候, 在二级页面下还须要新的子页面, 就须要使用路由嵌套功能webpack
<template> <div> java </div> </template> <script> export default { name: "java" } </script> <style scoped> </style>
使用 router-link 进行页面跳转web
添加 router-view 指定显示区域vue-router
路径导航使用全路径npm
<template> <div> <NavList/> <div class="left"> <ul> <li><router-link :to="java">java</router-link></li> <li><router-link :to="python">python</router-link></li> <li>bigdata</li> </ul> </div> <div class="right"> 视图区域 <router-view/> </div> </div> </template> <script> import NavList from "./NavList"; export default { name: "course", components: {NavList}, data() { return { java: "/course/java", python: "/course/python", } } } </script> <style scoped> .left, .right { float: left; } .left { margin-left: 0; } .right { margin-left: 50px; } </style>
使用 redirect 指定一开始进入的默认页面app
{ path: '/course', name: 'Course', component: Course, // 默认进入重定向 redirect: "/course/java", // 子嵌套 children: [ { path: "java", name: "Java", component: Java }, { path: "python", name: "Python", component: Python } ] },
在vue中, 能够经过参数传递, 将值或者对象传递给路由子页面spa
data() { return { index: "/", course: "/course", master: "/master", obj: { name: "wenbronk", age: 18 } } }
<li><router-link :to="{ name: 'Master', params:{count: 100, type: obj}}">专家</router-link></li>
<template> <div> 专家: {{ $route.params.count }} - {{ $route.params.type.name }} </div> </template> <script> export default { name: "master" } </script> <style scoped> </style>
默认是 router-link-active, 更改
mode: "history", linkActiveClass: "active",
.active {
color: red
}
<li><router-link :to="index" exact>首页</router-link></li>