vue-router--基本

单页面基本路由配置,六部:

1.引入vue-router.js

2.定义组件: const Home = vue,component('home',{

template: `  `

})

3.创建路由对象: const router = new VueRouter({

routes:[   //设置路由规则

{path: '/home', component: Home }  //一个对象表示一条路由规则

]

})

4.关联vue实例与路由对象:

var vm = new Vue({

....

router: touter

})

5.配置路由出口:<router-view></router-view>

6.配置路由的路由 : <router-link to="/home">我的首页</touter-link>

 

 其他:

1.路由重定向

                 {path: '/', redirect: '/home'}

2.动态路由(路由参数)

                 {path: '/user/:id', conmpoent:User}

                      /user/xxx

                      {{$route.params.id}}