vue中的路由

最新推荐文章于 2022-12-24 19:44:34 发布

什么意思哦呢嗯

最新推荐文章于 2022-12-24 19:44:34 发布

阅读量230

点赞数 1

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_49171551/article/details/127110443

版权

Vue Router 动态路由嵌套路由编程式导航组件守卫

关键词由CSDN通过智能技术生成

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

路由从创建到使用

路由的作用：监听url地址栏的变化，根据url加载url对应的页面/组件

一、认识路由

1.引入vueRouter插件

方式一：CDN引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.5.4/vue-router.min.js" integrity="sha512-zxWuRslhjyZyRAYInXTNl4vC/vBBwLQuodFnPmvYAEvlv9XCCfi1R3KqBCsT6f9rk56OetG/7KS9dOfINL1KCQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

方式二：本地引入

<script src='vue.js'></script>
<script src='vue-router.js'></script>

方式三：cnpm下载

cnpm install vue-router

2.定义组件

let myA = {

templete:`<div></div>`

}

3.创建路由对象数组

const routes=[

{

path:'article',

component:article

{

path:'/column',

component:column

}

]

4.创建路由器实例对象，将路由对象数组注入到路由器对象中

let router = new VueRouter({

routes

});

5.将路由器对象注入到vue实例中

new Vue({

router

});

6.使用路由

跳转到页面

router-link to='/article'

路由出口匹配路由器对应的页面

router-view

<body>
  <div id="app">
    <!-- 5.使用路由 -->
    <router-link to="/article">这是文章页面</router-link>
    <router-link to="/column">这是栏目页面</router-link>
    <router-view></router-view>
  </div>
  <script>
    // 2.定义一个组件
    let article = {
      template: `
        <div>文章页面</div>
      `
    };
    let column = {
      template: `
        <div>栏目页面</div>
      `
    }
    //  1.配置路由对象数组
    let routes = [
      {
        path: '/article',
        component: article
      },
      {
        path: '/column',
        component: column,
      }
    ]

    // 3.创建一个路由器实例  将路由对象数组注入到路由器对象中
    const router = new VueRouter({
      routes
    });
    new Vue({
      // 4.将路由器对象注入到vue实例中
      router,
      el: '#app',
      data: {

      },
    })
  </script>
</body>

二、动态路由

需要把某种模式匹配到的所有路由，全部映射到同一个组件

比如：有一个user组件，对于所有id不同的用户，都要使用这个组件来渲染，这时就可以在vue-router的路径中使用动态路径参数来达到这个效果

<body>
  <div id="app">
    <!-- 5.使用路由 -->
    
    <router-link to="/user/1">这是用户页面</router-link>
    <router-view></router-view>
  </div>
  <script>
    // 2.定义一个组件
   
    let user = {
      template: `
        <div>用户页面</div>
      `,
      // 方法一：
      // created () {
      //   console.log(this.$route);
      // }
      // 方法二：
      // watch: {
      //   $route (to, from) {
      //     console.log(to, from);
      //   }
      // }
      beforeRouteUpdate (to, from) {
        console.log(to, from);
      }
    };

    //  1.配置路由对象数组
    let routes = [
      
      {
        path: '/user/:id',
        component: user
      }

    ]

    // 3.创建一个路由器实例  将路由对象数组注入到路由器对象中
    const router = new VueRouter({
      routes
    });
    new Vue({
      // 4.将路由器对象注入到vue实例中
      router,
      el: '#app',
      data: {

      },
    })
  </script>
</body>

监听路由参数的变化

created(){

console.log(this.$route.params.id)

}

watch:{

$route(to,from){

console.log(to.params.id)

}

//组件守卫

beforeRoutedate(tp,from){

console.log(to.params.id)

}

三、嵌套路由

就是给一个路由添加子路由

{

path:"/column"，

component:Column,

children:[
{

path:'/exma',

component:Exam

}

]

}

四、编程式导航

利用编程式导航实现页面跳转

传递数据

（1）利用path传递跳转页面路径，query传递参数

this.$router.push({

path: "/aDetails",

query: { id },

});

接收数据

this.id = this.$router.query.id

（2）利用跳转页面的name和params传递数据

this.$router.push({

name: "ADetails",

params: { id },

query: { name: "zhangsan" },

});

接收数据

this.id = this.$router.params.id

什么意思哦呢嗯

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中的路由

比如：有一个user组件，对于所有id不同的用户，都要使用这个组件来渲染，这时就可以在vue-router的路径中使用动态路径参数来达到这个效果。路由的作用：监听url地址栏的变化，根据url加载url对应的页面/组件。4.创建路由器实例对象，将路由对象数组注入到路由器对象中。（1）利用path传递跳转页面路径，query传递参数。需要把某种模式匹配到的所有路由，全部映射到同一个组件。（2）利用跳转页面的name和params传递数据。路由出口匹配路由器对应的页面。就是给一个路由添加子路由。
复制链接

扫一扫