vue路由器 php,vue.js中路由器的配置方法介绍

本篇文章给大家带来的内容是关于vue.js中路由器的配置方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

在 vue 项目中装 路由模块npm install vue-router --save-dev

在配置路由之前，先来了解下 和 标签

和 标签是一样的作用用于跳转点我跳转页面

to 里面是地址，先不管他，因为 "/body" 是在配置路由时定义好的

的作用：点击 时，将需要跳转到的页面显示在其中，有点像H5中的

配置路由器

在 main.js 文件中引进和配置路由器模块//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为 "/" 意思是： 标签初始显示的地址

//component为上面 组件名

{path:"/",component:App_head},

{path:"/body",component:body_z}

],

mode:"history" //定义这个后，打开网页，8080后面不会跟着 /#/ 的符号

});

new Vue({

router, //记得在这里定义路由器，否则不能使用

el: '#app_body',

components: { App_body },

template: ''

})

路由器定义好后，就配合 和 标签使用

//点击后，跳转到http://localhost:8080/body

//点击后，将显示 HelloWorld 组件的内容

跳转页面

相关推荐：