vue路由 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    SPA单页面应用

    路由控制了页面应该显示的内容
    
    /a

    传参 除了使用动态路由外 还可以使用查询参数query

    两者的路由风格不同
      动态路由
        /type/1 /type/2 /type/3
      查询参数
        /type?id=1 /type?id=2 /type?id=3

      虽然两者表现不同，但是，功能都是相同的

      动态路由的参数想要获取使用 $route.params.参数名

      查询参数
        $route.query.参数名

    嵌套路由中的子路由所对应的组件会被渲染到其父路由组件的router-view中，如果没有这个，就不渲染
  -->

  <div id="app">
    <router-view></router-view>

  </div>
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
  <script>
    // 1 创建路由组件 (就是个组件配置对象)
    const com = {
      template: `
        <div>
          组件a
          // <router-view></router-view>
        </div>
      `
    }

    const channel = {
      /* 
        必须掌握
        在动态路由组件中，接收到动态路由参数
          1 模板中
            $route.params.id
          2 在组件的相关函数里
            this.$route.params.id
        当我们把router添加到new Vue后，在vue的每个组件的data中都会有一个$route
      */
      template: `
        <div>channel {{$route.params.id}}</div>
      `,
      created () {
        // this.$route.params.id
      }
    }
    // 2 创建路由配置
    const routes = [
      {
        path: '/',
        // component: '组件'
        component: com
      }, {
        path: '/a', // xxx.xxx.com/#/a
        component: com, // 这个时候才能称com为路由组件
        children: [
          {
            path: '',
            component: 
          }
        ]
      }, {
        path: '/channel/:id', // /channel/值
        component: channel
      }
    ]
    // 3 生成路由对象
    const router = new VueRouter({
      // routes: routes
      routes
    })
    // 4 将路由对象放在vue实例的配置汇中
    const app = new Vue({
      el: '#app',
      router
    })
  </script>
</body>
</html>

 

posted @ 2018-12-20 19:38  宝2333  阅读(140)  评论(0)    收藏  举报