Vue3 routing
In this chapter, we will introduce you to Vue routing.
Vue routing allows us to access different content through different URL.
Multi-view single-page Web application (single page web application,SPA) can be realized through Vue.
Vue.js routing needs to be loaded vue-router library
Chinese document address: vue-router document .
Installation
1.Download / CDN directly
https://unpkg.com/vue-router@4
NPM
Taobao image is recommended:
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install vue-router@4
Simple example
Vue.js + vue-router can easily implement a single page application.
<router-link> is a component that sets up a navigation link to switch between different HTML content. to property is the destination address, that is, what you want to display.
In the following example, we will vue-router add in, then configure components and route maps, and then tell vue-router where to render them. The code is as follows:
HTML code
<scriptsrc="https://unpkg.com/vue@3"></script><scriptsrc="https://unpkg.com/vue-router@4"></script><divid="app"><h1>Hello
App!</h1><p><!--Use router link components for navigation --><-- By transmitting \`to\`
To specify a link--><!--\`<router-link>\` Present a file with the correct \ ` href \ ` attribute
\`<a>\` label--><router-linkto="/">Go to
Home</router-link><router-linkto="/about">Go to
About</router-link></p><!--Routing Exit --><-- The components matched by the route will be rendered here--><router-view></router-view></div>
Router-link
Note that instead of using the regular a tag, we use a custom component router-link to create a link. This allows Vue Router to change URL and handle URL generation and coding without reloading the page. We will see later how to benefit from these features.
Router-view
router-view will be displayed with the url the corresponding component. You can put it anywhere to suit your layout.
JavaScript code
// 1. Define routing components
// It can also be imported from other files
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// 2. Define some routes
// Each route needs to be mapped to a component.
// We will discuss nested routing later.
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
]
// 3. Create a routing instance and pass the 'routes' configuration
// You can enter more configurations here, but we are here
// Keep it simple for now
const router = VueRouter.createRouter({
// 4. Internally, the implementation of the history pattern is provided. For simplicity, we will use the hash mode here.
history: VueRouter.createWebHashHistory(),
routes, // Abbreviations for `routes: routes`
})
// 5. Create and mount root instances
const app = Vue.createApp({})
//Ensure that the _use_ routing instance enables
//The entire application supports routing.
app.use(router)
app.mount('#app')
// Now, the application has started!
All navigation links clicked will be styled. class ="router-link-exact-active router-link-active" .
<router-link> related attribute
Next we can learn more about <router-link> property.
to
A link that represents the destination route. When clicked, the interior will immediately put to the value of the router.push() , so this value can be a string or an object that describes the target location
<!-- character string -->
<router-link to="home">Home</router-link>
<!-- Rendered results -->
<a href="home">Home</a>
<!-- JS expression using v-bind -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- It's okay not to write v-bind, just like binding other attributes-->
<router-link :to="'home'">Home</router-link>
<!-- ditto -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- Named Routes -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- With query parameters, the following results are /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
replace
Set up replace property, when clicked, calls the router.replace() instead of router.push() will not stay after navigation history record.
<router-link :to="{ path: '/abc'}" replace></router-link>
append
Set up append property, its path is added before the current (relative)path. For example, we start from /a navigate to a relative path b if there is no configuration append , the path is /b if it is matched, otherwise /a/b .
<router-link :to="{ path: 'relative/path'}" append></router-link>
tag
Sometimes I want <router-link> render to some kind of label, such as <li> . So we use tag the prop class specifies what kind of label, and it also listens for clicks and triggers navigation.
<router-link to="/foo" tag="li">foo</router-link>
<!-- Rendered results -->
<li>foo</li>
active-class
Sets the CSS class name to use when the link is activated. It can be replaced by the following code.
<style>
._active{
background-color : red;
}
</style>
<p>
<router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
Pay attention class use active-class="_active" .
exact-active-class
Configuration that should be activated when the link is exactly matched class . It can be replaced by the following code.
<p>
<router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
event
Declare events that can be used to trigger navigation. It can be a string oran array containing strings.
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>
The above code sets the event for mouseover and the HTML content that you navigate when you move the mouse over Router Link 1