前端路由vueRouter

vueRouter官网：Vue Router | Vue.js 的官方路由 (vuejs.org)https://router.vuejs.org/zh/

新建一个router-demo新的项目，然后在终端使用npm install vue-router@3

 创建Discover.vue,Friends.vue,My.vue三个

Discover.vue如下

<template>
    <div>   
        <h1>发现音乐</h1>
    </div>
</template>

 Friends.vue如下

<template>
    <div>   
        <h1>关注</h1>
    </div>
</template>

 My.vue如下

<template>  
    <div>   
        <h1>我的音乐</h1>
    </div>
</template>

 App.vue添加代码

<template>
  <div id="app">
    <router-link to="/discover">发现音乐</router-link>
    <router-link to="/my">我的音乐</router-link>
    <router-link to="/friends">关注</router-link>
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 新建index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Discover from '../components/Discover.vue'
import Friends from '../components/Friends.vue'
import My from '../components/My.vue'

Vue.use(VueRouter)

const router = new VueRouter({
    //指定hash属性与组件的对应关系
    routes:[
    {path:'/',redirect:'/discover'},
    {path:'/discover',component:Discover},
    {path:'/friends',component:Friends}, 
    {path:'/my',component:My},

    ]
})

export default router   

main.js添加代码

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

Vue.config.productionTip = false

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

运行

 

新建TopList.vue和PlayList.vue

 TopList.vue如下

<template>  
    <h3>推荐</h3>
</template>

PlayList.vue如下

<template>
    <h3>歌单</h3> 
</template>

Discover.vue修改

<template>
    <div>   
        <h1>发现音乐</h1>
        <router-link to="/discover/toplist">推荐</router-link>
        <router-link to="/discover/playlist">歌单</router-link>
        <hr>
        <router-view></router-view>
    </div>
</template>

index.js修改

import Vue from 'vue'
import VueRouter from 'vue-router'
import Discover from '../components/Discover.vue'
import Friends from '../components/Friends.vue'
import My from '../components/My.vue'
import TopList from '../components/TopList.vue'
import PlayList from '../components/PlayList.vue'

Vue.use(VueRouter)

const router = new VueRouter({
    //指定hash属性与组件的对应关系
    routes:[
    {path:'/',redirect:'/discover'},
    {
        path:'/discover',
        component:Discover,
        children:[ 
            {path:'toplist',component:TopList},
            {path:'playlist',component:PlayList},
        ] 
    },
    
    {path:'/friends',component:Friends}, 

    ]
})

export default router   

 刷新

新建Product.vue

<template>  
    <h3>商品{{id }}</h3>
</template>

<script>   
    export default {
        props: ["id"]
    }
</script>

 修改My.vue

<template>  
    <div>   
        <h1>我的音乐</h1>
        <router-link to="/my/1">商品1</router-link>
        <router-link to="/my/2">商品2</router-link>
        <router-link to="/my/3">商品3</router-link>
        <router-view></router-view>  
    </div>
</template>

修改index.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Discover from '../components/Discover.vue'
import Friends from '../components/Friends.vue'
import My from '../components/My.vue'
import TopList from '../components/TopList.vue'
import PlayList from '../components/PlayList.vue'
import Product from '../components/Product.vue'

Vue.use(VueRouter)

const router = new VueRouter({
    //指定hash属性与组件的对应关系
    routes:[
    {path:'/',redirect:'/discover'},
    {
        path:'/discover',
        component:Discover,
        children:[ 
            {path:'toplist',component:TopList},
            {path:'playlist',component:PlayList},
        ] 
    },
    
    {path:'/friends',component:Friends}, 
    {path:'/my',
        component:My,
        children:[
            {path:':id',component:Product,props:true},
        ]     
    },
    ]
})

export default router   

刷新