VUE框架使用vue-router实现在页面上跳转template内容,并设置初始页重定向------VUE框架

电玩女神 2024-02-26 00:48 45阅读 0赞

>     npm install vue-router@3
> 
> npm install vue-router@3

>     <template>
>       <div id="app">
>         
>         <router-link to="/discover">发现音乐</router-link>
>         <router-link to="/my">我的音乐</router-link>
>         <router-link to="/friend">关注</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>
> 
> <template>
> 
> <div id="app">
> 
> 
> 
> <router-link to="/discover">发现音乐</router-link>
> 
> <router-link to="/my">我的音乐</router-link>
> 
> <router-link to="/friend">关注</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>

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

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

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

>     import Vue from 'vue'
>     import App from './App.vue'
>     import router from './router/index'
>     Vue.config.productionTip = false
>     
>     new Vue({
>       render: h => h(App),
>       router:router
>     }).$mount('#app')
> 
> import Vue from 'vue'
> 
> import App from './App.vue'
> 
> import router from './router/index'
> 
> Vue.config.productionTip = false
> 
> new Vue(\{
> 
> render: h => h(App),
> 
> router:router
> 
> \}).$mount('\#app')

>     import VueRouter from "vue-router";
>     import Vue from "vue";
>     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 : '/friend', component: Friends},
>             { path : '/my', component: My},
>         ]
>     })
>     
>     export default router
> 
> import VueRouter from "vue-router";
> 
> import Vue from "vue";
> 
> 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 : '/friend', component: Friends\},
> 
> \{ path : '/my', component: My\},
> 
> \]
> 
> \})
> 
> export default router