vue， vue-router 直接页面引入（下）

接上篇

由于格式化后字数超出限制，于是 分为上，下两篇来写，请点击看上文

映射路由

简单改造准备工作的文件

div 中去掉多余的代码

<div id="app">
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

定义路由的步骤添加一个重定向

var routes = [
  { path: "/foo", component: Foo },
  { path: "/bar", component: Bar },
  { path: "/", redirect: '/foo'} //新增路由重定向
];

路由文件编辑

目前只有在同一个页面来编写组件，如果有更好办法，会更新

修改路由映射组件 template

<script>
  // var Foo = { template: "<div>foo</div>" };
  // var Bar = { template: "<div>bar</div>" };
  var Foo = { template: "#foo" };
  var Bar = { template: "#bar" };
</script>

添加路由组件的方法有两种：

• 使用 template 标签

<div id="app">
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

// !!! 是在 div 标签外编写
<template id="foo">
  <div>
    我是foo
    <!-- 跳转/bar -->
    <router-link to="/bar">bar</router-link>
  </div>
</template>
<template id="bar">
  <div>我是bar</div>
</template>

<!-- .... -->

• 使用 script 引入(由于 template 对 ie 不支持，所以使用以下代码替代)

<div id="app">
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

<script type="text/x-template" id="foo">
    <div>
        我是foo
        <!-- 跳转/bar -->
        <router-link to="/bar">bar</router-link>
    </div>
</script>
<script type="text/x-template" id="bar">
    <div>我是bar</div>
</script>

<!-- .... -->

升级路由组件功能

以上的组件不支持我们绑定响应式数据，于是做了如下修改，使其能支持更多 vue 的功能

<div id="app">
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

<script type="text/x-template" id="foo">
  <div>
    我是foo
    <!-- 将 /bar 用方法跳转 -->
    <button @click="toBar">{{ msg }}</button>
  </div>
</script>
<script type="text/x-template" id="bar">
  <div>我是bar</div>
</script>


//将单一的 定义组件 替换以下扩展功能
<script>
  // var Foo = { template: "#foo" };
  // var Bar = { template: "#bar" };
  var Foo = Vue.component('foo', {
      template: '#foo',
      data(){
        return{
          msg: '点击我 bar'
        }
      },
      methods:{
        toBar(){
          this.$router.push({
            path: '/bar'
          })
        }
      }
   })

 var Bar = Vue.component('bar', {
    template: '#bar',
    mounted () {

    },
})
    // ...
</sctipt>

demo 地址

点击链接：demo-02

参考

博客