394 vue路由使用注意事项

入口
- 最常用的入口是 声明式导航 router-link

<!-- 
    router-link 组件最终渲染为 a标签， to属性转化为 a标签的href属性 
    to 属性的值 ， 实际上就是哈希值，将来要参与路由规则中进行与组件匹配
    <a href="#/one" class="">ONE</a>
-->
<!-- 不是所有的路由 to=""前，都要加冒号: ，写死的路由就不加，to前面不加冒号，就会把属性值当做字符串 -->
<router-link to="/one">首页</router-link>

组件

const One = {
  template： `<div> 子组件 one </div> `
}

演示：多个组件匹配

<div id="app">
  <!-- 1 路由入口：链接导航 -->
  <!-- 不是所有的路由 to=""前，都要加冒号: ，写死的路由就不加，to前面不加冒号，就会把属性值当做字符串 -->
  <router-link to="/one">One</router-link>
  <router-link to="/two">Two</router-link>

  <!-- 4 路由出口：用来展示匹配路由视图内容 -->
  <router-view></router-view>
</div>

<!--  导入 vue.js -->
<script src="./vue.js"></script>
<!--  导入 路由文件 -->
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
  // 3 创建两个组件
  const One ={
    template： '<h1>这是 one 组件</h1>'
  }
  const Two =  {
    template： '<h1>这是 two 组件</h1>'
  }

  // 0 创建路由对象
  const router = new VueRouter({
    // 2. 路由规则
    routes： [
      { path： '/one'， component： One }，
      { path： '/two'， component： Two }
    ]
  })

  const vm = new Vue({
    el： '#app'，
    //0. 不要忘记，将路由与vue实例关联到一起！
    router
  })
</script>

02-多个路径.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <!-- 
        准备工作
        1. 安装
        2. 引入
        3. 实例化+挂载

        具体步骤
        1. 入口
        2. 规则
        3. 组件
        4. 出口
    -->

    <div id="app">
        <!-- 第一步 : 入口 
            1. 刚才手动写 测试.开发时候用   /one   /two
            2. 声明式导航
        -->

        <!-- 
            router-link 声明式导航 
            router-link 最终会编译成 a 标签 
            to 转化为href 
            作用 : 改变入口的哈希值路径
        -->

        <!-- 最后编译成 <a href="#/one" class="">ONE</a> -->
        <router-link to="/one">ONE</router-link>
        <!-- <router-link to="/two">TWO</router-link> -->

        <!-- 第四步 :出口 -->
        <router-view></router-view>
    </div>

    <script src="./vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        // 第三步 : 组件
        const One = {
            template: `<div>one组件</div>`
        }
        const Two = {
            template: `<div>two组件</div>`
        }

        // 实例化路由
        const router = new VueRouter({
            // 规则
            routes: [{
                path: '/one',
                component: One
            }, {
                path: '/two',
                component: Two
            }]
        })

        const vm = new Vue({
            router,
            el: '#app',
            data: {}
        })
    </script>
</body>

</html>