2.17.1. Installation ¶

https://unpkg.com/vue-router@4

npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install vue-router@4

2.17.2. 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:

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

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

2.17.4. Router-view ¶

router-view will be displayed with the url the corresponding component. You can put it anywhere to suit your layout.

2.17.5. 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" .

2.17.6. <router-link> related attribute ¶

Next we can learn more about <router-link> property.

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

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

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

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

2.17.11. 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" .

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

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