vue路由，路由传参（parmas,query）(1)，web开发学习教程

1 .安装

npm install vue-router --save

2 .main.js中

//Vue路由：引入

import VueRouter from ‘vue-router’

Vue.use(VueRouter)

//Vue路由：引入并创建组件

import BYHome from ‘./components/BYHome.vue’

import BYNews from ‘./components/BYNews.vue’

import HelloWorld from ‘./components/HelloWorld.vue’

//Vue路由：配置路由

const routes = [

{path: ‘/home’, component: BYHome},

{path: ‘/news’, component: BYNews},

{path: ‘/helloworld’, component: HelloWorld},

{path: ‘*’, redirect: ‘/home’} /*默认跳转路由 */

]

//Vue路由：实例化VueRouter

const router = new VueRouter({

routes //缩写，相当于 routes:routes

})

new Vue({

router, //Vue路由：挂载路由

render: h => h(App),

}).$mount(‘#app’)

//Vue路由：根组件的模板里面放上下面这句话，需要在App.vue 中配置路由出口：路由匹配到的组件将渲染在根组件App.vue中

//路由跳转

首页

新闻

helloWorld

二、Vue路由配置的抽出

1.安装

npm install vue-router --save

2.创建router.js文件，在该文件中配置路由并暴露出去

import Vue from ‘vue’;

//Vue路由：引入

import VueRouter from ‘vue-router’

Vue.use(VueRouter)

//Vue路由：引入并创建组件

import BYHome from ‘…/BYHome.vue’

import BYNews