VUE路由（个人备忘）

一。路由基本使用

安装模块 npm install vue-router
引入

router = new VueRouter({ 
routes: [  //路由是一个对象数组  path 哈希  component对应组件
     {  //正常路由
       path: '/', 
       component: AppHome
       }, 
     {  //嵌套路由
                path: '/news',
                component: News,
                children: [
                    {
                        // 当匹配到 /news/sport时,
                        // 组件 Sport 会被渲染在 News 组件中的 <router-view> 组件中
                        path: '/news/sport',
                        component: Sport,
                        children: [
                            {
                                path: '/news/sport/detail/:id' , // :id 是路径变量，占位符
                                component: SportDetail
                            }
                        ]
                    },
                    {
                        // 简写方式 ,等价于 /news/tech 路径, 前面不要有 / , 有 / 就是根路径 啦
                        path: 'tech',
                        component: Tech,
                        children: [
                            {
                                path: '/news/tech/detail/:id',
                                component: TechDetail
                            }
                        ]
                    },
                    {
                        // 默认选择的路径 : /news 后面没有子路径时, redirect 就是重写向到指定路                径 下,即体育
                        path: '',
                        redirect: '/news/sport'
                    }
                ]
            },{path: '/about', component: About} 
    
 ] })

路由出口

```javascript
<router-view></router-view>

二.个人理解
1.组件在路由中配置后，不用在实例中加载（components）
2.配置好路由后，路由出口可放在任意组件中