Project structures,
Vue – the installation of the router
I. When scaffolding VUE-CLI is used to build vUE project based on webpack template, vue-Router is selected in the project configuration, that isInstall vue-router? Yes(Recommended)
npm install vue-routerenter
Routing Example
Routing components and non-routing components
Components can be divided into two categories, routed components and non-routed components. The sidebar in the image above is the three routing components, and the one on the right is the non-routing component.
Using vue-Router installed using the first method, the directory structure of the installed project folder should look like this:
Create a routing component folder
The routing component folder is usually namedviews 或 pagesIt’s personal preference, not mandatory. The file path is placed under the SRC folder.
Creating a Routing Component
From the image above, we can see that there are 3 routing components, so we create 3. Vue files in the Views folder. They are named RouterA, B, and C. The content is basically the same.
Configure the routing
Once the routing component file is created, we need to go into the router file for routing configuration. This is a bit convoluted. Imagine the concept of a route for a routing component.
How to do it: Go to the Router folder, open the index.js file inside, and write the code. Index. Js file
import Vue from 'vue' / / into the vue
import Router from 'vue-router' // Import routes
// Import a custom routing component
import RouterA from '.. /views/RouterA.vue'
import RouterB from '.. /views/RouterB.vue'
import RouterC from '.. /views/RouterC.vue'
// Use the routing plugin, this must remember to write
Vue.use(Router)
// Configure the router
export default new Router({ // Exposed by default, any name can be used when imported
// N routes. Each object in the array represents one route
// Each route has a path attribute and a Component attribute
routes: [{
path: '/routera'.component: RouterA // Note that this is not a string and must be consistent with the name after import
}, {
path: '/routerb'.component: RouterB
}, {
path: '/routerc'.component: RouterC
}, {
// This is a special route that redirects requests to routera when we request the root path
// Set the default route (page)
path: '/'.redirect: './routera'}].// Once the route is configured, you need to go to the entry file main.js
// Configure the router when creating the Vue instance: import the router,
})
Copy the codeBe careful to be consistent
Configuring a Router
The index.js file above is to configure the route in the router. Once the route is configured, we will start to configure the router.
Operation method: Go to the main.js entry file in the SRC folder
import Vue from 'vue'
import App from './App'
import router from './router' // Import the router,
// Since the router is exposed by default, it can be imported using any name
// Import Router233 from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({ // Attribute names of configuration objects are fixed attribute names that cannot be changed arbitrarily
el: '#app',
router,
components: { App },
template: '<App/>'.// Configure the router
router // Equivalent to router:router
// Router: Router233 // To import Router233 from './router', write this
})
// After the router is configured, go to app. vue and use
and
to use routing
Copy the codeUse the routing
After the router is configured, it starts to go to the app. vue page to use routing. Usage:
and
app.vue
<template>
<div id="app">
<div class="container-fluid">
<div class="row clearfix">
<div class="col-md-2 column">
<div class="list-group">
<! Router /index.js router/index.js router/index.js router/index.js router/index.js router/index.js
<router-link to="/routera" class="list-group-item">Go to page A</router-link>
<router-link to="/routerb" class="list-group-item">Go to page B</router-link>
<router-link to="/routerc" class="list-group-item">Go to page C</router-link>
</div>
</div>
<div class="col-md-10 column">
<router-view>
<! -- The current router component is displayed in the router-view tag -->
</router-view>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
Copy the codeIn the app. vue page, we use<router-link>The TAB is replaced by the one in the original page<a>The label
<router-view>Inside the label. What does this picture mean? Don’t worry, let’s look at the static page again:
Write non-routed components
Go to the components folder in the SRC directory and create a card.vue component.
Card.vue
<template>
<div class="card">
<div class="card-header">
{{head_content}}
</div>
<div class="card-body">
<h1 class="card-title">{{h1_content}}</h1>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</template>
<script>
export default {
props: {
head_content:String.h1_content:String}}</script>
<style>
</style>
Copy the codeNon-routed components are used in routed components
After writing the Card component above, we go back to the views folder and reference the non-routing component Card in the three routing components.
RouterA.vue
<template>
<div>
<! -- Using components -->
<Card head_content=A "page" h1_content="This is page A."/>
</div>
</template>
<script>
import Card from '.. /components/Card.vue' // Import components
export default {
components: {
Card // map to a label}}</script>
<style>
</style>
Copy the codeRouterb. vue and RouterC.vue import components as in the above file.
At this point, we can already see the effect:
supplement
When we open the controller, we can see that when the routing component is selected, we automatically add a router-link-Active class to it, so we can make our routing component look better by adding some styling to the class, such as writing the following code in index.html:
<style type="text/css">
.router-link-active{
color: red ! important;
}
</style>
Copy the codeThe styles in the page also change:
Code word is not easy, trouble everyone to move a small hand to praise it! (^ v ^)