What is vue.js routing

Routing refers to the process in which a router receives a data packet from one interface, directs it according to the destination address of the data packet, and forwards it to another interface.

Vue.js routing allows us to access different content through different URLs.

Vue.js can be used to implement multi-view single page web applications (single page web application, SPA).

Vue.js routing needs to load the vue-router library

But when using routing, the url also changes, and users can copy it directly when browsing to a web page Or save the URL of the current page to others. This method is friendly to both search engines and users.

Simple example

Vue.js vue-router can easily implement a single-page application.

is a component that is used to set a navigation link and switch between different HTML contents. The to attribute is the target address, which is the content to be displayed.

In the following example, we add vue-router, then configure the components and route mapping, and then tell vue-router where to render them. The code is as follows:

HTML code

<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 <div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view></div>

JavaScript code

// 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)
 
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
 
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
 
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})
 
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')
 
// 现在，应用已经启动了！

Clicked navigation links will be styled class="router-link-exact-active router-link-active".

The above is the detailed content of What is vue.js routing. For more information, please follow other related articles on the PHP Chinese website!