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

Function: When you click , the page you need to jump to is displayed in it, a bit like the

<div>
   <router-view></router-view>
</div>

Configuring Router## in H5

#Introduce and configure the router module in the main.js file

//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: &#39;#app_body&#39;,
  components: { App_body },
  template: &#39;<App_body/>&#39;
})

After the router is defined, use it with the and tags

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