【路由的基本使用】

最新推荐文章于 2024-08-14 15:45:18 发布

大嘴猴..

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量85

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_47838418/article/details/127679861

版权

路由的基本使用

1.引入js文件，放在vue.js后面

2.创建路由对象

const router = new VueRouter

3.创建映射关系

routes

4.将路由挂载到vue实例上

 router: router

5.预留展示区

<router-view></router-view>

<!DOCTYPE html>
<html>

<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></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    .active {
      font-size: 40px;
      color: hotpink;
    }
  </style>
</head>
<!-- 1.引入js文件，放在vue.js后面 -->

<body>
  <div id='app'>
    <!-- 5.预留展示区 -->
    <router-view></router-view>
    <router-view name="mine"></router-view>
  </div>
  <template id="index">
    <div>
      index
      <router-link :to="{path:'/detail',query:{courseid:111} }">跳转到详情页</router-link> <!-- path方法 -->
      <router-link :to="{path:'/detail/son',query:{courseid:111} }">跳转到详情页的儿子</router-link> <!-- son会出来 -->
      <router-link :to="{name:'my',params:{userid:222} }">跳转到我的页</router-link> <!-- name方法 -->
      <button @click="toplay">跳转到play</button> <!-- 函数的path方法 -->
      <button @click="toplay2">my</button> <!-- 函数的name方法 -->
    </div>
  </template>
  <!-- 详情页 -->
  <template id="detail">
    <div>
      detail
      <router-view></router-view>
    </div>
  </template>
  <!-- 本身页 -->
  <template id="mine">
    <div>
      mine
    </div>
  </template>
  <!-- 娱乐页 -->
  <template id="play">
    <div>
      play
    </div>
  </template>
  <template id="son">
    <div>
      son11121
    </div>
  </template>
  
  <script>
    let play = {
      template: '#play'
    }
    let son = {
      template: '#son'
    }
    let mine = {
      template: '#mine',
    }
    let index = {
      template: '#index',
      methods: {
        toplay() {
          this.$router.push({
            path: "/play",
            query: {
              course: 444
            }
          })
        },
        toplay2() {
          this.$router.push({
            name: 'my',
            params: {
              userid: 888
            }
          })
        }
      }
    }
    let detail = {
      template: '#detail',
      created() {
        console.log(this.$route.query.courseid);
      }
    }
    //2.创建路由对象
    const router = new VueRouter({
      //3.创建映射关系
      routes: [
        //路由重定向
        {
          path: '/',
          redirect: '/index'
        },
        {
          path: '/index',
          // component: index,
          components: {   //通过router-view中的name属性将它放在视图层上
            default:index,
            mine
          }
          /*           children: {
                  //     {
          
                  // }
                  [
                    path: 'son',
                    component: son
                  ]
                    } */
        },
        {
          path: '/detail',
          component: detail,
          children: [
            {
              path: 'son',
              component: son,
            }
          ]
        },
        {
          path: '/play',
          component: play
        },
        {
          path: '/mine/:userid',
          component: mine,
          name: 'my'
        },
      ],
      //自定义路由高亮
      linkActiveClass: 'active'
    })
    const vm = new Vue({
      //4.将路由挂载到vue实例上
      router: router,
      el: '#app',
      data: {
      },
      methods: {
      }
    })
  </script>
</body>

</html>