vue-router的使用以及js如何跳转页面

最新推荐文章于 2024-07-27 11:33:23 发布

灯光下的投影

最新推荐文章于 2024-07-27 11:33:23 发布

阅读量5.4k

点赞数 3

分类专栏： vue 文章标签： vue-router 编程式导航

本文链接：https://blog.csdn.net/liuyuhua666/article/details/93634475

版权

vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

vue-router的使用步骤：

把文件引入进来

创建组件的参数对象

创建vue-router实例

将vue-router实例和Vue实例关联起来

指定路由匹配的组件展示的位置 router-view

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
  <style>
    .footer {
      position: absolute;
      bottom: 0;
    }
  </style>
</head>
<body>
  <div id="app">
    <h1>这是头部</h1>
    <!-- <ul>
      <li><a href="#/login">登录页</a></li>
      <li><a href="#/register">注册页</a></li>
      <li><a href="#/list">列表页</a></li>
    </ul> -->
    <ul>
      <li>
        <router-link to="/login">登录页</router-link>
      </li>
      <li>
        <router-link to="/register">注册页</router-link>
      </li>
      <li>
        <router-link to="/list">列表页</router-link>
      </li>
    </ul>
    
    //指定路由匹配的组件展示的位置 router-view
    <router-view></router-view>
    <div class="footer">这是底部</div>
  </div>


  //把文件引入进来
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script src="./node_modules/vue-router/dist/vue-router.js"></script>
  <script>

    //创建组件的参数对象
    const login = {
      template: `<div>
    <h1>这是登录页</h1>
    <button>登录</button>
  </div>`
    }
    const register = {
      template: `<div>
    <h1>这是注册页</h1>
    <button>注册</button>
  </div>`
    }
    const list = {
      template: `<div>
    <h1>这是列表页</h1>
    <button>列表</button>
  </div>`
    }

    
    //创建vue-router实例
    const routers = new VueRouter({
      routes: [
        {
          path: '/login',
          component: login
        },
        {
          path: '/register',
          component: register
        },
        {
          path: '/list',
          component: list
        }
      ]
    })


    //将vue-router实例和Vue实例关联起来
    const vm = new Vue({
      el: '#app',
      router: routers
    })
    
  </script>
</body>
</html>

路由规则对象中的其他一些属性和用法：

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li>
        <router-link to="/login">login</router-link>
      </li>
      <li>
        <router-link :to="{name: 'lg'}">name</router-link>
      </li>
      <li>
        <router-link :to="{path: '/login'}">path</router-link>
      </li>
      <li>
        <router-link :to="{name: 'lg', params: {name: 'zs', age: 18}}">name params</router-link>
      </li>
      <li>
        <router-link :to="{name: 'lg', query: {name: 'zs', age: 18}}">name query</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script src="./node_modules/vue-router/dist/vue-router.js"></script>
  <script>
    const login = {
      template: `<div>
    <h1>这是登录页</h1>
    <button>登录</button>
  </div>`
    }
    const routers = new VueRouter({
      routes: [
        // {
        //   path: '/',
        //   component: login
        // },
        // {
        //   name: 'lg',
        //   path: '/login',
        //   component: login
        // },
        {
          name: 'lg',
          path: '/login/:name/:age',
          component: login
        }
      ]
    })
    const vm = new Vue({
      el: '#app',
      router: routers
    })
  </script>
</body>
</html>

路由参数的获取：

1、问号传参的方式：

      created(){
        // 当前组件中获取路由的？传递的参数，
        // 我们可以通过this.$route.query就可以获取到所有的参数了
        console.log(this.$route.query)
      }

2、动态路由的方式：

     created(){
        // 如果使用的是动态路由进行参数传递的，那么我们可以通过this.$route.params来进行参数获取
        console.log(this.$route.params)
      }

通过js代码如何跳转其它页面（也叫编程式导航）：

routers.push('/login')

或者：this.$router.push({path: '/register'})

或者：this.$router.push({name: 'rg'})

灯光下的投影

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录