route配置 vue_vue-router 的配置和使用

安装cnpm install vue-router  --save

引入

import vuerouter from vue-router

使用

vue.use()

配置路由

1、创建组建。 引入组建

import VueRouter from 'vue-router';

Vue.use(VueRouter);

2、定义路由

const routes = [

{ path: '/foo', component: Foo },

{ path: '/bar', component: Bar }

]

3、实例化

const router = new VueRouter({

routes // (缩写) 相当于 routes: routes

})

4、挂载

new Vue({

el: '#app',

router,

render: h => h(App)

})

5、页面引入

使用组件所加载的地方

------------------------------------------------------------------------------

使用

表示路由的跳转，默认会被渲染成一个 `` 标签

找不到路由时默认加载路由，在配置路由的地方{path:'*',redirect:'/x'}

------------------------------------

不同路由传值

A动态路由：

1、配置动态路由{path:/x/:id}

2、在链过去的页面使用this.$route.param获取动态路由的值

Bget传值：路径?id=123

this.$route.query可以以对象的方式直接获取

两个获取的结果一样

——————————————————————————————

页面跳转方式：

1、router-link

2、编程式导航(js跳转页面)：

this.$route.push({path:'x'})

3、命名路由，通过name跳转

hash改为history模式，history模式要结合后端配置

-------------------------------------

路由的嵌套/父子路由

1、配置路由 。 2、父路由里面配置子路由显示的地方