search

Home >Web Front-end >JS Tutorial >Detailed explanation of how to use Vue.js routing component vue-router

Detailed explanation of how to use Vue.js routing component vue-router

高洛峰
高洛峰Original
2017-02-06 11:15:061560browse

It is very simple to create a single-page application using Vue.js + vue-router. Just configure the component and route mapping, and then tell vue-router where to render.

1. Basic examples of common methods: 

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>vue-router使用方法</title>
</head>
<body>
 <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>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router"></script>
 <script>
 
 // 1. 定义（路由）组件。
 // 可以从其他文件 import 进来
 const Foo = { template: &#39;<div>foo</div>&#39; }
 const Bar = { template: &#39;<div>bar</div>&#39; }
 
 // 2. 定义路由
 // 每个路由应该映射一个组件。 其中"component" 可以是
 // 通过 Vue.extend() 创建的组件构造器，
 // 或者，只是一个组件配置对象。
 const routes = [
 { path: &#39;/foo&#39;, component: Foo },
 { path: &#39;/bar&#39;, component: Bar }
 ]
 
 // 3. 创建 router 实例，然后传 `routes` 配置
 const router = new VueRouter({
 routes // （缩写）相当于 routes: routes
 })
 
 // 4. 创建和挂载根实例。
 // 记得要通过 router 配置参数注入路由，
 // 从而让整个应用都有路由功能
 const app = new Vue({
 router
 }).$mount(&#39;#app&#39;)
 
 // 现在，应用已经启动了！
 </script>
</body>
</html>

2. Basic examples of block mechanism programming, taking the use method in vue-cli as an example

Install vue-router plug-in

# npm install vue-router --save-dev

Create a new file in the components folder under the src folder Foo.vue and Bar.vue two components, write the following content in the Foo component 

<template>
 <div>foo</div>
</template>

Write the following content in the Bar.vue component

<template>
 <div>bar</div>
</template>

Open src For the app.vue file under the folder, modify the code to 

<template>
 <div id="app">
 <router-view
 class="view"
 keep-alive
 transition
 transition-mode="out-in">
 </router-view>
 </div>
</template>

Here, use router-view to load the two newly created pages here, and modify the main under the src folder. .js file

import Vue from &#39;vue&#39;
import App from &#39;./App&#39;
//引用路由插件
import VueRouter from &#39;vue-router&#39;
 
//使用路由插件
Vue.use(VueRouter)
 
//引入组件
import Foo from &#39;./components/Foo&#39;
import Bar from &#39;./components/Bar&#39;
 
const routes = [
 { path: &#39;/foo/&#39; , component: Foo }，
 { path: &#39;/bar/&#39; , component: Bar }，
]
 
//使用路由规则
const router = new VueRouter({
 routes
})
//加载路由规则
new Vue({
 router,
 el: &#39;#app&#39;,
 render:h => h(App)
})

Then run npm run dev to see the effect.

The above is the entire content of this article. I hope it will be helpful to everyone's learning, and I also hope that everyone can use PHP Chinese.

For more detailed explanations on how to use the Vue.js routing component vue-router, please pay attention to the PHP Chinese website for related articles!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js implements custom routingNext article：js implements custom routing

Related articles

See more