vueRouter 路由的配置

vueRouter

$route 和 $router区别

$route 和 $router 不是同一个对象

1. $route: 代表的是当前路由信息对象（当前的路由）
2. $router: 代表的是路由对象（路由的实例化对象）

路由的配置

1. 引入vue-rotuer.js 文件

<script src='vue.js'></script>
<script src='vue-router.js'></script>

2. 创建路由组件模板
   每个组件必须存在一个唯一的根元素

const 组件名 = {
   
    template:`组件模板`
}

3. 创建路由配置
   path属性： 匹配的路由； component属性： 匹配到对应路由渲染对应的组件

const routes = [
    {
   
        path:'/path1',
        component:组件名1
    },{
   
        path:'/path2',
        component:组件名2
    }
]

4. 创建路由的实例化对象

const router = new VueRouter({
   
    routes
})

5. 在vue实例中 注册路由

const app = new   Vue({
   
    ...,
    router
})

6. 在 div#app 中添加一个 <router-view>标签 用来渲染路由组件

<div id='aqpp'>
    <router-view></router-view>
</div>

路由跳转

1. 声明式路由 ： 通过 <router-link>标签的to属性实现 : to绑定的是路由