1. Declarative navigation-navigation links
1. Requirements
Implement navigation highlighting effect
If you use the a tag to jump, you need to add styles to the currently jumped navigation, and at the same time remove the style of the previous a tag, which is too troublesome! ! !
2. Solution
vue-router provides a global component router-link (replacing the a tag)
- Can jump, configure the to attribute to specify the path (required). The essence is still a tag, to does not need #
- Can be highlighted, Highlight class name will be provided by default, and the highlighting style can be set directly
Grammar: Discover Music
<div>
<div class="footer_wrap">
<router-link to="/find">Discover music</router-link>
<router-link to="/my">My music</router-link>
<router-link to="/friend">Friend</router-link>
</div>
<div class="top">
<!-- Routing exit → The position where the matching component is displayed -->
<router-view></router-view>
</div>
</div>
3. Highlight through the two styles that come with router-link
After using router-link to jump, we found out. The currently clicked link has two class values added by default: router-link-exact-active and router-link-active
We can add a highlight style to any class attribute to achieve the function
2. Declarative navigation-two class names
When we use jump, two class names are automatically added to the current navigation.
<style>
.router-link-active{<!-- -->
background-color: orange
}
</style>
1.router-link-active
Fuzzy matching (used frequently)
to=”/my” can match /my /my/a /my/b …
As long as the path starts with /my, it can be matched with to=”/my”
2.router-link-exact-active
Exact match
to=”/my” can only match /my
3. Enter the secondary route in the address bar to view the addition of the class name
3. Declarative navigation-custom class name (understand)
1. Question
router-link’s two highlighted class names are too long, what should we do if we want to customize them?
2. Solution
We can configure two additional configuration items when creating the routing object. linkActiveClass and linkExactActiveClass
const router = new VueRouter({<!-- -->
routes: [...],
linkActiveClass: "Class name 1",
linkExactActiveClass: "Class name 2"
})
3. Code demonstration
//Created a routing object
const router = new VueRouter({<!-- -->
routes: [
...
],
linkActiveClass: 'active', // Configure fuzzy matching class name
linkExactActiveClass: 'exact-active' // Configure the exact matching class name
})
4. Summary
How to customize the two highlighted class names of router-link
4. Declarative Navigation-Query Parameter Passing
1. Goal
When jumping the route, pass parameters
For example: Now we click on the popular search link on the search page and jump to the details page. We need to bring the clicked content to the details page. What should we do instead?
2. Jump to parameter transfer
We can pass the required parameters to other pages when jumping in two ways:
- Query parameter passing
- Dynamic routing parameters
3. Query parameter passing
-
How to pass parameters?
-
How to accept parameters
Fixed usage: $route.query.Parameter name
4. Code demonstration
App.vue
<template>
<div id="app">
<div class="link">
<router-link to="/home">Home</router-link>
<router-link to="/search">Search page</router-link>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.link {
height: 50px;
line-height: 50px;
background-color: #495150;
display: flex;
margin: -8px -8px 0 -8px;
margin-bottom: 50px;
}
.link a {
display: block;
text-decoration: none;
background-color: #ad2a26;
width: 100px;
text-align: center;
margin-right: 5px;
color: #fff;
border-radius: 5px;
}
</style>
Home.vue
<template>
<div class="home">
<div class="logo-box"></div>
<div class="search-box">
<input type="text">
<button>Search</button>
</div>
<div class="hot-link">
popular searches:
<router-link to="/search?key=Dark Horse Programmer">Dark Horse Programmer</router-link>
<router-link to="/search?key=front-end training">Front-end training</router-link>
<router-link to="/search?key=How to become a front-end expert">How to become a front-end expert</router-link>
</div>
</div>
</template>
<script>
export default {
name: 'FindMusic'
}
</script>
<style>
.logo-box {
height: 150px;
background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
display: flex;
justify-content: center;
}
.search-box input {
width: 400px;
height: 30px;
line-height: 30px;
border: 2px solid #c4c7ce;
border-radius: 4px 0 0 4px;
outline: none;
}
.search-box input:focus {
border: 2px solid #ad2a26;
}
.search-box button {
width: 100px;
height: 36px;
border: none;
background-color: #ad2a26;
color: #fff;
position: relative;
left: -2px;
border-radius: 0 4px 4px 0;
}
.hot-link {
width: 508px;
height: 60px;
line-height: 60px;
margin: 0 auto;
}
.hot-link a {
margin: 0 5px;
}
</style>
Search.vue
<template>
<div class="search">
<p>Search keyword: {<!-- -->{ $route.query.key}}</p>
<p>search results: </p>
<ul>
<li>.............</li>
<li>.............</li>
<li>.............</li>
<li>.............</li>
</ul>
</div>
</template>
<script>
export default {
name: 'MyFriend',
created () {
// In created, get the routing parameters
}
}
</script>
<style>
.search {
width: 400px;
height: 240px;
padding: 0 20px;
margin: 0 auto;
border: 2px solid #c4c7ce;
border-radius: 5px;
}
</style>
router/index.js
import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter plug-in initialization
//Created a routing object
const router = new VueRouter({<!-- -->
routes: [
{<!-- --> path: '/home', component: Home },
{<!-- --> path: '/search', component: Search }
]
})
export default router
main.js
...
import router from './router/index'
...
newVue({
render: h => h(App),
router
}).$mount('#app')
5. Declarative Navigation-Dynamic Routing Parameters
1. Dynamic routing parameter transfer method
-
Configure dynamic routing
The parameters behind dynamic routing can be named casually, but they must be semantic.
const router = new VueRouter({<!-- --> routes: [ ..., {<!-- --> path: '/search/:words', component:Search } ] })Home.vue
<div class="hot-link"> popular searches: <router-link to="/search/黑马programmer">Dark horse programmer</router-link> <router-link to="/search/front-end training">Front-end training</router-link> <router-link to="/search/How to become a front-end expert">How to become a front-end expert</router-link> </div>
Search.vue
<p>Search keywords: {<!-- -->{ $route.params.word}}</p> -
Configure navigation links
to=”/path/parameter value”
-
The corresponding page componentaccepts parameters
$route.params.Parameter name
The parameter names after params must be consistent with the parameters of dynamic routing configuration.
2. Query parameter passing VS dynamic routing parameter passing
-
Query parameter passing (more suitable for passing multiple parameters)
- Jump: to=”/path?parameter name=value & parameter name2=value”
- Get: $route.query.Parameter name
-
Dynamic route parameter passing (Elegant and concise, it is more convenient to pass a single parameter)
- Configure dynamic routing: path: “/path/: parameter name”
- Jump: to=”/path/parameter value”
- Get: $route.params.Parameter name
Note: Dynamic routing can also pass multiple parameters, but generally only one is passed.
3. Summary
When declarative navigation jumps, how many ways are there to pass values to the routing page?
- Query parameter transfer (multiple parameters)
- Dynamic route parameter passing (one parameter, elegant and concise)
6. Optional characters of dynamic routing parameters (understanding)
1. Question
The route path: “/search/:words” is configured. Why does the component not match and the display is blank when following the steps below?
2. Reason
/search/:words means that parameters must be passed. If you don’t pass parameters and still want to match, you can add an optional character “?”
const router = new VueRouter({<!-- -->
routes: [
...
{<!-- --> path: '/search/:words?', component: Search }
]
})