master

分支 (1)

管理

管理

master

vue-courseware
/
34-vue-router.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <!--
            vue-router 是vue的官方路由管理器。是前端路由（跳转页面的，切换组件）。
                        是基于vue语法封装的一个js插件，专门处理应用中组件跳转关系的插件。
                在大型项目中，组件数量多，组件之间关系也很复杂，必须用一个专门管理组件切换关系的插件。
            router  --  路由对象，路由管理者。
            routes  --  路由信息的集合，好多个路由信息的集合，形成一个路由表
            route   --  一条路由信息，一个映射关系，（登录button--登录页面，点击发布按钮---发布文章）
                            点击商品列表---展示列表组件
         -->

    <!--
          使用流程：
            1，引入vue-router的js插件
            2，实例化 路由对象（vueRouter），添加路由表，对应关系
                let router = new VueRouter({
                  routes:[{
                    path:""
                    component:{}
                  },{},]
                })
            3,给vue实例对象，注入路由
                new Vue({
                  router:router
                })
            4,调用路由：
                router-link ：触发路由的，声明式导航，使用to属性切换组件，原理是a标签的href属性
                router-view ：路由视图，路由对应的组件渲染的位置
          -->
    <!--
            1）路由参数：在路由信息对象的params中。
                  在path中以冒号开头的就是路由参数，abc，def就是参数名字
                  routes:[{
                    path:"/home/:abc/:def/....."
                    component:{}
                  },{},]
              获取： this.$route.params.abc
              组件绑定：  {{$route.params.abc}}
              【注意事项：如果path规定了路由参数数量，必须携带相应数量参数才能正常使用组件！！！】
           -->
  </body>
  <script></script>
</html>