Home > Article > Web Front-end > Introduction to the configuration method of router in vue.js
This article brings you an introduction to the configuration method of routers in vue.js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Install the routing module in the vue project
npm install vue-router --save-dev
Before configuring routing, let’s first understand the b988a8fd72e5e0e42afffd18f951b277 and 975b587bf85a482ea10b0a28848e78a4 tags
a18f1fb9a1944f223457f05172f100a5 and 3499910bf9dac5ae3c52d5ede7383485 tags have the same function and are used for jumping
<router-link to="/body">点我跳转页面</router-link>
to. Inside is the address. Ignore it for now, because "/body" is defined when configuring routing
975b587bf85a482ea10b0a28848e78a4 Function: When you click b988a8fd72e5e0e42afffd18f951b277, the page you need to jump to is displayed in it, a bit like the 04a0d55efbbfd646a993fbc01f262c57
<div> <router-view></router-view> </div>
//main.js
//引进路由器模块
import VueRouter from 'vue-router'
//引进跳转的 组件页面地址
import App_head from './App_head'
import body_z from './components/HelloWorld'
Vue.config.productionTip = false;
Vue.use(VueRouter);
//配置路由器
const router = new VueRouter({
routes:[
//path为 "/" 意思是：<router-view> 标签初始显示的地址
//component为上面 组件名
{path:"/",component:App_head},
{path:"/body",component:body_z}
],
mode:"history" //定义这个后，打开网页，8080后面不会跟着 /#/ 的符号
});
new Vue({
router, //记得在这里定义路由器，否则不能使用
el: '#app_body',
components: { App_body },
template: '<App_body/>'
})
<div> //点击后，跳转到http://localhost:8080/body //点击后，<router-view>将显示 HelloWorld 组件的内容 <router-link to="/body">跳转页面</router-link> <router-view></router-view> </div>Related recommendations:
Nested routing (sub-routing) of Vue.js
Vue. js route naming and named views
The above is the detailed content of Introduction to the configuration method of router in vue.js. For more information, please follow other related articles on the PHP Chinese website!