Vue动态路由

作者: 剑有偏锋 | 来源:发表于2018-08-01 21:58 被阅读189次

一 创建测试项目

vue init webpack-simple vuedemo

二 进入demo目录

cd vuedemo

三 安装依赖

cnpm install

四 安装 vue-router

cnpm install vue-router --save

五 修改代码

├── src
│ ├── App.vue
│ ├── components
│ │ ├── Content.vue
│ │ ├── Home.vue
│ │ ├── News.vue
│ │ └── Pcontent.vue
│ ├── main.js

App.vue

<template>
  <div id="app">
    <router-link to="/home">home</router-link>
    <router-link to="/news">news</router-link>
    <hr>
    <br>
    <router-view></router-view>

  </div>
</template>

<script>

import Home from './components/Home.vue';
import News from './components/News.vue';

export default {
  name: "app",
  data() {
    return {
      msg:'hello vue world!',     
    };
  },
  components:{
    'v-home':Home,
    'v-news':News
  },
};
</script>

<style>

</style>

Content.vue

<template>
    <div id="content">
        i am content
    </div>
</template>

<script>
export default {
    data(){
        return {
            msg: "content"
        }
    },
    mounted(){
        console.log(this.$route.params)
    }
}
</script>

Home.vue

<template>
    <!-- all content need in root-->
    <div>      
        {{msg}}Home
        <br>

         <ul>
             <li v-for="(item,k) in list" :key="item.id">
               <router-link :to="'/pcontent?id='+k">{{k}} -- {{item}} </router-link>
             </li>
         </ul>  
    </div>
</template>

<script>
export default {
    data(){
        return {
            msg:'i am home component!',
            list:['goods1', 'goods2','goods3']
        }
    }
}
</script>

<style>
</style>

News.vue

<template>
    <!-- all content need in root-->
    <div>      
        {{msg}}News
         <br>
         <ul>
             <li v-for="(item,k) in list" :key="item.id">
               <router-link :to="'/content/'+k">{{k}} -- {{item}} </router-link>
             </li>
         </ul>        
    </div>
</template>


<script>

export default {
    data(){
        return {
            msg:'i am news component!',
            list:['111','222','333']
        }
    }    
}
</script>

<style>
</style>

Pcontent.vue

<template>
    <div id="content">
        goods content
    </div>
</template>

<script>
export default {
    data(){
        return {
            msg: "content"
        }
    },
    mounted(){   

        console.log(this.$route.query);
    }
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Home from './components/Home.vue'
import News from './components/News.vue'
import Content from './components/Content.vue'
import Pcontent from './components/Pcontent.vue'

const routes = [
  {path:'/home', component:Home},
  {path:'/news', component:News},
  {path:'/content/:aid', component:Content},
  {path:'/pcontent', component:Pcontent},

  {path:'*', redirect:''}
]

const router = new VueRouter({
  routes
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

六 运行

npm run dev


image.png

七 总结

1 "域名/参数1/参数2" 子目录方式传参
《1 配置动态路由

routes:{
    {path:'user/:id', component:Content}
}

《2 在模板上,用js字符串追加的方式传参数

 <router-link :to="'/content/'+key">{{k}} -- {{item}} </router-link>

《3 在对应页面获取动态路由参数

this.$route.params

2 "域名?参数1=xxx&参数2=xxx" 方式传参
《1 配置动态路由

routes:{
      {path:'/pcontent', component:Pcontent},
}

《2 在模板上,用js字符串追加的方式传参数

<router-link :to="'/pcontent?id='+k">{{k}} -- {{item}} </router-link>

《3 在对应页面获取动态路由参数

this.$route.query

八 参考

https://router.vuejs.org/
https://router.vuejs.org/zh/api/#to

相关文章

  • vue路由的介绍(二)--vue动态路由和get的传值

    vue动态路由和get的传值---->同属于路由的传参 1,vue动态路由: 动态路由的配置: ①,在配置路由时加...

  • Vue应用

    Vue项目 Vue结构 Vue项目打包与发布 Vue语法二 Vue网络请求 Vue路由 动态路由 编程式路由导航

  • 手写 Vue Router、手写响应式实现、虚拟 DOM 和 D

    Vue-Router 原理实现 一、Vue-Router 动态路由 二、Vue-Router 嵌套路由 三、Vue...

  • Vue路由

    一、Vue路由基础用法: 二、Vue路由配置的抽出 三、路由动态传值: 四、路由的跳转方式: 五、路由的hash模...

  • Vue常见面试题

    1.怎么定义vue-router的动态路由?怎么获取传递过来的动态参数? 何为动态路由?能够提供参数的路由即为动态...

  • vue中的路由

    vue中4中路由包含: 1、动态路由2、嵌套路由3、编程式路由4、命名式路由 1、动态路由 2、嵌套路由 3、编程...

  • Vue路由及默认路由的跳转

    https://router.vuejs.org/ 代码实现如下 Vue动态路由get传参 vue路由结合请求数据...

  • 【转载】vue动态路由的实现思路及踩坑

    原文:Vue Router 实现动态路由和常见问题及解决方法 Vue项目实现动态路由的方式大体可分为两种: 前端将...

  • vue路由-4-动态添加-addRoute-keepAlive

    1. 前言 很多场景都是动态路由,那今天来梳理下动态路由 2. 动态路由-场景-杂谈 应用场景 紧接上篇文章vue...

  • vue-addRoute-keepAlive

    1. 前言 很多场景都是动态路由,那今天来梳理下动态路由 2. 动态路由-场景-杂谈 应用场景 紧接上篇文章vue...

网友评论

    本文标题:Vue动态路由

    本文链接:https://www.haomeiwen.com/subject/pzxdvftx.html