路由步骤

<div id=\"app\">二：定义路由(链接)    <router-link to=\"/user\">用户</router-link>   <router-link to=\"/dog\">狗狗</router-link>  三: 指定路由的填充位置用于未来展现组件信息   //定义路由占位符A   <router-view>     填充的位置被解析之后 就是一个DIV  </router-view> <div>

组件绑定内容

路径绑定链接

    定义路由对象    routes:  路由的多个映射通过该属性进行定义。 <script>    let vueRouter = new VueRouter({      routes: [        {path: \"/user\

  <!-- 定义组件的标签体 -->  <template id=\"userTem\">    <div>      <h3>用户信息</h3>    </div>    </template>    <template id=\"dogTem\">     <div>        <h3>狗狗信息</h3>      <router-link to=\"/samo\">萨摩耶</router-link>      <router-link to=\"/bite\">比特犬</router-link>            //定义路由占位符B      <router-view>        填充的位置被解析之后 就是一个DIV      </router-view>    </div>    </template>

匹配模板标签

四： 准备组件，定义路由对象 <script>         let userCom = {     template: \"#userTem\"   }      let dogCom= {     template: \"#dogTem\"   }    let samoCom = {      template: \"#samoTem\"    }    let biteCom = {      template: \"#biteTem\"    } </script>

渲染父模板占位符标签内容

渲染子模板占位符标签内容

一：导入路由JS    先导入vue.js  再导入路由.js 顺序问题  <script src=\"../js/vue.js\"></script><script src=\"../js/vue-router.js\"></script>

 <script>   const APP = new Vue({      el: \"#app\

VUE中的路由：根据用户的请求URL地址，展现特定的组件(页面)信息。 (控制用户程序跳转过程)

  //定义子组件的标签体  <template id=\"samoTem\">    <div>      <h3>白色的狗狗</h3>    </div>  </template>  <template id=\"biteTem\">    <div>      <h3>一只凶猛的狗</h3>    </div>  </template>