1, 新建vue-router 項目

vue init webpack vue-router-test

是否創(chuàng)建路由: 是

2, 添加路由列表頁

在 component下創(chuàng)建 NavList 頁面

<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>

?

3, 添加子頁面

index.vue, master.vue, course.vue等, 僅展示 index.vue

<template><div><NavList/>首頁</div> </template><script>import NavList from "./NavList";export default {name: "index",components: {NavList},data() {return {}}} </script><style scoped></style>

?

4, 在index.js 中導入子頁面, 配置路徑和頁面關系

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}] })

5, 在app vue 中, 添加路由顯示位置

router-view

<template><div id="app"><!--<img src="./assets/logo.png">--><!--<NavList/>--><router-view/></div> </template>

6, 使用 npm run dev 運行, 即可看到初始效果

7, 路由嵌套

有時候, 在二級頁面下還需要新的子頁面, 就需要使用路由嵌套功能

7.1) 在 component中添加 java.vue, python.vue 等子頁面

<template><div>java</div> </template><script>export default {name: "java"} </script><style scoped></style>

7.2), 在course 中 引入路由嵌套

使用 router-link 進行頁面跳轉(zhuǎn)

添加 router-view 指定顯示區(qū)域

路徑導航使用全路徑

<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">視圖區(qū)域<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>

7.3) 在index.js 中指定 子嵌套關系

使用 redirect 指定一開始進入的默認頁面

{path: '/course',name: 'Course',component: Course,// 默認進入重定向redirect: "/course/java",// 子嵌套 children: [{path: "java",name: "Java",component: Java},{path: "python",name: "Python",component: Python}]},

?8, 參數(shù)傳遞

在vue中, 可以通過參數(shù)傳遞, 將值或者對象傳遞給路由子頁面

8.1) 定義要傳遞的對象

data() {return {index: "/",course: "/course",master: "/master",obj: {name: "wenbronk",age: 18}}}

8.2), 在 router-link 中, 使用 :to={} 的形式進行傳遞參數(shù)

<li><router-link :to="{ name: 'Master', params:{count: 100, type: obj}}">專家</router-link></li>

8.3) 在 master 頁面, 接受參數(shù)

<template><div>專家: {{ $route.params.count }} - {{ $route.params.type.name }}</div> </template><script>export default {name: "master"} </script><style scoped></style>

9, 路由高亮, 實現(xiàn)點擊的呈現(xiàn)高亮效果

9.1), 在index.js 中, 添加 路由選中class名

默認是 router-link-active, 更改

mode: "history",linkActiveClass: "active",

9.2), 在全局中配置, css 樣式

.active {color: red}

9.3), 對于匹配 / 的, 會始終顯示高亮, 需要添加 exact 屬性;?

<li><router-link :to="index" exact>首頁</router-link></li>

?

總結(jié)

以上是生活随笔為你收集整理的vue-11-路由嵌套-参数传递-路由高亮的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。