vueRouter使用整理

vueRouter使用整理

vue路由网址
1.需要单独安装，不是集成到Vue里的。

2.正常情况下，需要一个routes的配置文件，并把这个配置文件作为routes参数传入到VueRouter实例化的参数里。VueRouter的实例又将作为参数传递到最外层Vue实例的router参数。

//路由的配置文件
export default [{
    path: '',
    name: '',
    components: {
        //默认组件
        default: 组件
        anotherView: 组件
    }
}]

.......
export default new VueRouter({
     ...
     routes: 就是上面的路由配置文件
})

new Vue({
    ...
    router:就是上面的VueRouter实例
})

3.有一个组件标签<router-view>,这个组件用于帮路由配置中的组件占位。可以有一个名字，那就对应路由组件里的components，没有名字就对应default，这是最容易忽视的地方。

4还有一个组件，跳转标签<router-link to='' tag='li'>

5.只要使用了router，每一个组件上就有一个$route和$router，第一个表示当前路由所对应的所有路由信息。第二个是路由的方法。

6.传递参数的时候注意，有显示传参和隐式传参。

7.编程式导航 router.push()等同于声明式导航<router-link :to="">

8.命名视图

html中

<router-view class="view two" name="a"></router-view>

components: {
        default: Foo,
        a: Bar
      }

9.重定向

重定向也在routes配置中完成。要重定向/a到/b：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

redirect重定向也可以使用命名线路{name: b}

也可以使用函数 to => {}

10.别名

重定向意味着当用户访问时/a，URL将替换为/b，然后匹配为/b。但是什么是别名？

/a作为/b用户访问时的别名/b，URL仍然存在/b，但它将被匹配，就像用户正在访问一样/a。

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

使用脚手架构建：

需要在创建脚手架时，自定义创建，勾选上router。