vue路由学习

Vue router

现在火热的框架中都具有路由（router）的功能，vue当然也不例外，vue路由功能的实现借助于官方提供的一个vue-router插件
所以在写路由的第一步就是去安装这个插件
顺便把vue也一起安装好

npm i -S vue vue-router
然后在页面引入vue 和 vue-router

一级路由

vue路由的实现大体需要4步

第一步就是先将每个路由要加载的组件写出来

在这里我定义三个组件

var NewsComponent = {
            template: `<div>新闻</div>`
        }
        var ShopComponent = {
            template: `<div>商城</div>`
        }
        var NotFoundComponent = {
            template: `<div>404</div>`
        }

第二步将路由地址与组件联系配置好

var routes = [{
            path: '/',
            redirect: '/news'
        }, {
            path: '/news',
            component: NewsComponent
        }, {
            path: '/shop',
            component: ShopComponent
        }, {
            path: '*',
            component: NotFoundComponent
        }]

第三部创建一个VueRouter对象

var router = new VueRouter({
            routes
        })

最后一步将路由实例注册到vue实例中去

var app = new Vue({
            router
        }).$mount("#app ")

经过完善html内容

<div id="app">
        <router-link to="/news">新闻管理</router-link>
        <router-link to="/shop">商城管理</router-link>
        <main>
            <router-view></router-view>
        </main>
</div>

即可实现一个简单的一级路由
效果如下

点击可以切换路由

**路由这块内容，要注意几个route的变形写法都是固定的，不能更改。
html内容中的router-link标签经过渲染后在页面中会生成一个a标签，标签中的to属性代表着点击后的路由跳转地址，后面的router-view标签则是专门用来渲染路由内容的，vue极其适合做不刷新页面的的单页面应用**

路由实现动态渲染

先定义一个公共组件，在模板中放入一个传入的变量

const User = {
  template: '<div>user</div>'
}

然后定义一个路由实例

const router = new VueRouter({
  routes: [{
    path: '/user/:id',
    component: User
  }]
})

最后还是老样子，把路由注册到vue实例中

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

在body中写入

<div id="app">
  <router-link to="/user/foo">/user/foo</router-link>
  <router-link to="/user/bar">/user/bar</router-link>
  <router-view></router-view>
</div>

打开页面并打开vue调试工具，点击两个按钮切换后在页面中并不会看到什么变化，但是我们可以在调试工具中看到

有一个$route对象其中有一个跟随路由变化的属性params，其中的id就是我们写在/user/后面的内容，那么很方便的我们就拿到路由跳转的信息，可以据此来选择加载路由上不容的数据

嵌套路由

嵌套路由父级路由与一级路由相似
不过在父级模板中要添加嵌套的路由标签
HTML body：

<div id="app">
  <router-link to="/news">新闻管理</router-link>
  <router-link to="/shop">商城管理</router-link>
  <main>
    <router-view></router-view>
  </main>
</div>

父级模板：

var NewsComponent = {
  template: `<div>新闻
    <router-link to="/news/add">添加新闻</router-link>
    <router-link to="/news/search">搜索新闻</router-link>
    <router-view></router-view>
   </div>`
}
var ShopComponent = {
  template: `<div>商城
    <router-link to="/shop/add">添加商品</router-link>
    <router-link to="/shop/search">搜索商品</router-link>
    <router-view></router-view>
   </div>`
}

子级路由：

var NewsAddComponent = {
  template: `<div>
    <input type="text" placeholder="请输入新闻标题"/>
    <input type="submit" value="添加新闻" />
  </div>`
}
var NewsSearchComponent = {
  template: `<div>
    <table>
      <tr>
        <th>新闻ID</th>
        <th>新闻标题</th>
        <th>操作</th>
      </tr>
      <tr>
         <td>001</td>
         <td>ofo在山里频繁现身</td>
         <td>删除</td>
      </tr>
     </table>
   </div>`
}
、var GoodsSearchComponent = {
            template: `<div>
          <input type="text" placeholder="请输入商品名称"/> 
          <input type="submit" value="添加商品" />
        </div>`
        }
var GoodsAddComponent = {
          template: `<div>
            <table>
              <tr>
               <th>商品ID</th>
               <th>商品名称</th>
               <th>操作</th>
             </tr>
           <tr>
             <td>001</td>
             <td>ofo小黄车</td>
             <td>添加</td>
           </tr>
          </table>
        </div>`
        }

实例化一个路由：

routes = [{
            path: '/',
            redirect: '/news'
        }, {
            path: '/news',
            component: NewsComponent,
            children: [{
                path: 'add',
                component: NewsAddComponent
            }, {
                path: 'search',
                component: NewsSearchComponent
            }, {
                path: '*',
                component: NotFoundComponent
            }]
        }, {
            path: '/shop',
            component: ShopComponent,
            children: [{
                path: 'add',
                component: GoodsAddComponent
            }, {
                path: 'search',
                component: GoodsSearchComponent
            }, {
                path: '*',
                component: NotFoundComponent
            }]
        }
})

注册路由：

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

效果如下：