VUE框架使用vue-router实现带信息跳转页面效果------VUE框架

「爱情、让人受尽委屈。」 2024-02-26 01:01 112阅读 0赞

>     <template>
>         <div>
>             <el-row>
>                 <el-col :span="24"><div class="grid-content bg-purple-dark"><h1>我的音乐</h1></div></el-col>
>             </el-row>
>             <el-row>
>                 <el-col :span="8"><div class="grid-content bg-purple"><router-link to="/my/1">商品1</router-link></div></el-col>
>                 <el-col :span="8"><div class="grid-content bg-purple-light"><router-link to="/my/2">商品2</router-link></div></el-col>
>                 <el-col :span="8"><div class="grid-content bg-purple"><router-link to="/my/3">商品3</router-link></div></el-col>
>             </el-row>
>             <router-view></router-view>
>         </div>
>     </template>
>     <style>
>       .el-row {
>         margin-bottom: 20px;
>       }
>       .el-col {
>         border-radius: 4px;
>       }
>       .bg-purple-dark {
>         background: #99a9bf;
>       }
>       .bg-purple {
>         background: #d3dce6;
>       }
>       .bg-purple-light {
>         background: #e5e9f2;
>       }
>       .grid-content {
>         border-radius: 4px;
>         min-height: 36px;
>       }
>       .row-bg {
>         padding: 10px 0;
>         background-color: #f9fafc;
>       }
>     </style>
> 
> <template>
> 
> <div>
> 
> <el-row>
> 
> <el-col :span="24"><div class="grid-content bg-purple-dark"><h1>我的音乐</h1></div></el-col>
> 
> </el-row>
> 
> <el-row>
> 
> <el-col :span="8"><div class="grid-content bg-purple"><router-link to="/my/1">商品1</router-link></div></el-col>
> 
> <el-col :span="8"><div class="grid-content bg-purple-light"><router-link to="/my/2">商品2</router-link></div></el-col>
> 
> <el-col :span="8"><div class="grid-content bg-purple"><router-link to="/my/3">商品3</router-link></div></el-col>
> 
> </el-row>
> 
> <router-view></router-view>
> 
> </div>
> 
> </template>
> 
> <style>
> 
> .el-row \{
> 
> margin-bottom: 20px;
> 
> \}
> 
> .el-col \{
> 
> border-radius: 4px;
> 
> \}
> 
> .bg-purple-dark \{
> 
> background: \#99a9bf;
> 
> \}
> 
> .bg-purple \{
> 
> background: \#d3dce6;
> 
> \}
> 
> .bg-purple-light \{
> 
> background: \#e5e9f2;
> 
> \}
> 
> .grid-content \{
> 
> border-radius: 4px;
> 
> min-height: 36px;
> 
> \}
> 
> .row-bg \{
> 
> padding: 10px 0;
> 
> background-color: \#f9fafc;
> 
> \}
> 
> </style>

>     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"
>     import PlayList from "../components/PlayList.vue";
>     import TopList from "../components/TopList.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 : 'playlist', component: PlayList},
>                 { path : 'toplist', component: TopList}
>             ]
>             },
>             { path : '/friend', component: Friends},
>             { path : '/my', component: My,
>             children:[
>                 { path : ':id', component: Product,props:true}
>             ]
>             },
>             
>         ]
>     })
>     
>     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"
> 
> import PlayList from "../components/PlayList.vue";
> 
> import TopList from "../components/TopList.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 : 'playlist', component: PlayList\},
> 
> \{ path : 'toplist', component: TopList\}
> 
> \]
> 
> \},
> 
> \{ path : '/friend', component: Friends\},
> 
> \{ path : '/my', component: My,
> 
> children:\[
> 
> \{ path : ':id', component: Product,props:true\}
> 
> \]
> 
> \},
> 
> \]
> 
> \})
> 
> export default router

>     <template>
>       <div id="app">
>     <div class="line"></div>
>     <el-menu
>       class="el-menu-demo"
>       mode="horizontal"
>       @select="handleSelect"
>       background-color="#545c64"
>       text-color="#fff"
>       active-text-color="#ffd04b">
>       <el-menu-item index="1"><router-link to="/discover">首页</router-link></el-menu-item>
>       <el-menu-item index="2"><router-link to="/discover">发现音乐</router-link></el-menu-item>
>       <el-menu-item index="3"><router-link to="/my">我的音乐</router-link></el-menu-item>
>       <el-menu-item index="4"><router-link to="/friend">关注</router-link></el-menu-item>
>     </el-menu>
>         <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">
> 
> <div class="line"></div>
> 
> <el-menu
> 
> class="el-menu-demo"
> 
> mode="horizontal"
> 
> @select="handleSelect"
> 
> background-color="\#545c64"
> 
> text-color="\#fff"
> 
> active-text-color="\#ffd04b">
> 
> <el-menu-item index="1"><router-link to="/discover">首页</router-link></el-menu-item>
> 
> <el-menu-item index="2"><router-link to="/discover">发现音乐</router-link></el-menu-item>
> 
> <el-menu-item index="3"><router-link to="/my">我的音乐</router-link></el-menu-item>
> 
> <el-menu-item index="4"><router-link to="/friend">关注</router-link></el-menu-item>
> 
> </el-menu>
> 
> <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>

>     import Vue from 'vue'
>     import App from './App.vue'
>     import router from './router/index'
>     Vue.config.productionTip = false
>     import ElementUI from 'element-ui';
>     import 'element-ui/lib/theme-chalk/index.css';
>     import axios from 'axios';
>     
>     axios.defaults.baseURL = "http://localhost:8088";
>     Vue.prototype.$http = axios;
>     Vue.config.productionTip = false;
>     Vue.use(ElementUI);
>      
>     new Vue({
>       render: h => h(App),
>       router:router,
>        el: '#app'
>     }).$mount('#app')
> 
> import Vue from 'vue'
> 
> import App from './App.vue'
> 
> import router from './router/index'
> 
> Vue.config.productionTip = false
> 
> import ElementUI from 'element-ui';
> 
> import 'element-ui/lib/theme-chalk/index.css';
> 
> import axios from 'axios';
> 
> axios.defaults.baseURL = "http://localhost:8088";
> 
> Vue.prototype.$http = axios;
> 
> Vue.config.productionTip = false;
> 
> Vue.use(ElementUI);
> 
> new Vue(\{
> 
> render: h => h(App),
> 
> router:router,
> 
> el: '\#app'
> 
> \}).$mount('\#app')

>     <template>
>         <div>
>           <h1>{
>         {id}}</h1>
>             <el-table
>                 :data="tableData"
>                 style="width: 100%">
>                 <el-table-column
>                     prop="id"
>                     label="Id"
>                     width="180">
>                 </el-table-column>
>                 <el-table-column
>                     prop="title"
>                     label="电影名称"
>                     width="180">
>                 </el-table-column>
>                 <el-table-column
>                     prop="rating"
>                     label="电影评分">
>                 </el-table-column>
>             </el-table>
>         </div>
>     
>     </template>
>     
>     <script>
>         export default {
>           data() {
>             return {
>               movie: []
>             }
>           },
>           created:function(){
>             alert("/Movie/findId?id=" + id);
>             this.$http.get("/Movie/findId?id=" + id).then((response)=>{
>               this.movie = response.data
>             })
>             },
>           props:["id"]
>         }
>       </script>
> 
> <template>
> 
> <div>
> 
> <h1>\{ \{id\}\}</h1>
> 
> <el-table
> 
> :data="tableData"
> 
> style="width: 100%">
> 
> <el-table-column
> 
> prop="id"
> 
> label="Id"
> 
> width="180">
> 
> </el-table-column>
> 
> <el-table-column
> 
> prop="title"
> 
> label="电影名称"
> 
> width="180">
> 
> </el-table-column>
> 
> <el-table-column
> 
> prop="rating"
> 
> label="电影评分">
> 
> </el-table-column>
> 
> </el-table>
> 
> </div>
> 
> </template>
> 
> <script>
> 
> export default \{
> 
> data() \{
> 
> return \{
> 
> movie: \[\]
> 
> \}
> 
> \},
> 
> created:function()\{
> 
> alert("/Movie/findId?id=" + id);
> 
> this.$http.get("/Movie/findId?id=" + id).then((response)=>\{
> 
> this.movie = response.data
> 
> \})
> 
> \},
> 
> props:\["id"\]
> 
> \}
> 
> </script>

>     <template>
>         <div>
>             <el-row>
>                 <el-col :span="24"><div class="grid-content bg-purple-dark"><h1>发现音乐</h1></div></el-col>
>             </el-row>
>             <hr>
>             <el-row>
>                 <el-col :span="12"><div class="grid-content bg-purple"><router-link to="/discover/toplist">推荐</router-link></div></el-col>
>                 <el-col :span="12"><div class="grid-content bg-purple-light"><router-link to="/discover/playlist">歌单</router-link></div></el-col>
>             </el-row>
>             <router-view></router-view>
>             
>         </div>
>     </template>
>     <style>
>       .el-row {
>         margin-bottom: 20px;
>       }
>       .el-col {
>         border-radius: 4px;
>       }
>       .bg-purple-dark {
>         background: #99a9bf;
>       }
>       .bg-purple {
>         background: #d3dce6;
>       }
>       .bg-purple-light {
>         background: #e5e9f2;
>       }
>       .grid-content {
>         border-radius: 4px;
>         min-height: 36px;
>       }
>       .row-bg {
>         padding: 10px 0;
>         background-color: #f9fafc;
>       }
>     </style>
> 
> <template>
> 
> <div>
> 
> <el-row>
> 
> <el-col :span="24"><div class="grid-content bg-purple-dark"><h1>发现音乐</h1></div></el-col>
> 
> </el-row>
> 
> <hr>
> 
> <el-row>
> 
> <el-col :span="12"><div class="grid-content bg-purple"><router-link to="/discover/toplist">推荐</router-link></div></el-col>
> 
> <el-col :span="12"><div class="grid-content bg-purple-light"><router-link to="/discover/playlist">歌单</router-link></div></el-col>
> 
> </el-row>
> 
> <router-view></router-view>
> 
> </div>
> 
> </template>
> 
> <style>
> 
> .el-row \{
> 
> margin-bottom: 20px;
> 
> \}
> 
> .el-col \{
> 
> border-radius: 4px;
> 
> \}
> 
> .bg-purple-dark \{
> 
> background: \#99a9bf;
> 
> \}
> 
> .bg-purple \{
> 
> background: \#d3dce6;
> 
> \}
> 
> .bg-purple-light \{
> 
> background: \#e5e9f2;
> 
> \}
> 
> .grid-content \{
> 
> border-radius: 4px;
> 
> min-height: 36px;
> 
> \}
> 
> .row-bg \{
> 
> padding: 10px 0;
> 
> background-color: \#f9fafc;
> 
> \}
> 
> </style>