Vue小白教程：路由配置（一）配置+動態路由傳參

配置過程

1.安裝

npm install vue-router --save /cnpm install vue-router --save

2、引入並 Vue.use(VueRouter) (main.js)

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

3、配置路由

1、創建組件 引入組件
2、定義路由  （建議複製）
	const routes = [
		{ path: '/foo', component: Foo },
		{ path: '/bar', component: Bar },
		  /*動態路由
		  1、路徑參數以冒號開頭；
		  2、在對應的頁面
  			 this.$route.params獲取動態路由的值*/
		{ path: '/content/:aid', component: Content }, 
		{ path: '*', redirect: '/home' }   /*默認跳轉路由*/
	]
3、實例化VueRouter
	const router = new VueRouter({
		  routes // （縮寫）相當於 routes: routes
	})

4、掛載

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

5 、根組件的模板裏面放上這句話
6、路由跳轉

<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

配置文件main.js

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

//1.創建組件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import Pcontent from './components/Pcontent.vue';

//2.配置路由   注意：名字
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/content/:aid', component: Content },   /*動態路由*/
  { path: '/pcontent', component: Pcontent },
  { path: '*', redirect: '/home' }   /*默認跳轉路由*/
]

//3.實例化VueRouter  注意：名字
const router = new VueRouter({
  routes // （縮寫）相當於 routes: routes
})

//4、掛載路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

//5 <router-view></router-view> 放在 App.vue

根組件Vue

<template>

  <div id="app"> 
  <!--路由跳轉-->
    <router-link to="/home">首頁</router-link>
    <router-link to="/news">新聞</router-link>
    <hr>
    <router-view></router-view><!--加上路由-->
  </div>
</template>

<script>
   export default {     
      data () { 
        return {
         msg:'你好vue'
        }
      }
    }
</script>
<style lang="scss">
</style>

子組件Home

<template>
    <!-- 所有的內容要被根節點包含起來 -->
    <div id="home">    
       我是首頁組件
    </div>
    <ul>
            <li v-for="(item,key) in list">
                <router-link :to="'/pcontent?id='+key">{{key}}--{{item}}</router-link><!--動態路由第一種寫法-->
            </li>
        </ul>
</template>

<script>
    export default{
        data(){
            return {               
               msg:'我是一個home組件'
               list:['商品111111','商品222222','商品333333']
            }
        }
    }
</script>
</script>
<style lang="scss" scoped> 

子組件News

<template>    
    <div id="news">    
       我是新聞組件
       <ul>
        <li v-for="(item,key) in list">
             <router-link :to="'/content/'+key">{{key}}--{{item}}</router-link><!--動態路由第二種寫法-->
        </li>
     </ul>        
    </div>
</template>

<script>
    export default{
        data(){
            return {               
               msg:'我是一個新聞組件'
               list:['111111','222222','333333']          
            }
        }
    }
</script>
<style lang="scss" scoped>  
</style>

Content

<template>
    <div id="content">    
       我是詳情頁面
    </div>
</template>

<script>
    export default{
        data(){
            return{
                msg:'數據'
            }
        },
        mounted()
                console.log(this.$route.params);  /*獲取動態路由傳值*/
        }
    }
</script>

Pcontent

<template>
    <div id="content">    
      商品詳情
    </div>
</template>

<script>
    export default{
        data(){
            return{
                msg:'數據'
            }
        },
        mounted(){
              //獲取get傳值
              console.log(this.$route.query);
        }
    }
</script>

效果

默認跳轉首頁，點擊“首頁”或“新聞”跳轉相應頁面，點擊組件動態鏈接，分別跳轉不同頁面，生成頁面網址不同

注：教學內容出自視頻教學IT營itying.com 大地老師Vue基礎教程