使用方法

创建路由

1. 定义路由，注意默认路由、404路由

const routes = [
    {path: '/', rediret: '/home'}, //默认路由
    
    {path: '/route1', component: Demo1},
    {path: '/route2', component: Demo2},
    
    {path: '*', component: NotFound} //404路由，*表示其他路由
]

2. 创建 router 实例

const router = new VueRouter({routes});

3. 在 Vue 实例中注入路由功能

new Vue({
    //...
    router
}).$mount('#app')

使用路由

1.<router-view>

用<router-view>组件表示当前路由对应的组件

2.<router-link>

用于路由切换，本质是个a标签

<router-link to="/route1" active-class="selected">点击</router-link>
<router-link to="/route2" active-class="selected">点击</router-link>

• to属性指定跳转的路由地址
• active-class属性，当前路由和to属性一致时，成为真正的class

路由数据相关

如下路由：

{path: '/route1/:xxx', component: Demo1}

:xxx是一个占位参数，表示此处可以是任意的字符串。

访问路由xxx.yyy.zzz/route1/123，'xxx'将成为this.$route中的属性。

$route和$router

• $route，收集路由信息，如：

$route.params 

• $router，路由器，执行操作

$router.push('/xxx') //重定向路由
$router.replace('/xxx') //也可以重定向，区别见文档
$router.back() //后退