vue 路由别名路由跳转

最新推荐文章于 2025-01-02 15:06:03 发布

转载最新推荐文章于 2025-01-02 15:06:03 发布 · 379 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Spinoza/p/10600948.html

文章标签：

#javascript #ViewUI

本文通过一个实例，详细展示了如何使用Vue.js和Vue-Router实现页面路由切换及动态内容加载，包括设置HTML基本结构，引入Vue.js和Vue-Router库，定义组件和路由，以及实现动态内容展示。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
 6     <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.js"></script>
 7 </head>
 8 <body>
 9 <div id="hdcms">
10     <router-view></router-view>
11 </div>
12 <script type="text/x-template" id="home">
13     <div>
14         <li v-for="v in news">
15             <router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link>
16         </li>
17     </div>
18 </script>
19 <script type="text/x-template" id="content">
20     <div>
21         <h1>{{field.title}}-{{field.id}}</h1>
22         <p>
23             {{field.content}}
24         </p>
25         <router-link to="/">返回首页</router-link>
26     </div>
27 </script>
28 <script>
29     var data = [
30         {id:1,title:'HDPHP开源免费框架',content:'这是内容....'},
31         {id:2,title:'HDCMS内容管理系统',content:'这是HDCMS内容....'}
32     ];
33     const home = {
34         template: '#home',
35         data(){
36             return {
37                 news:data
38             }
39         }
40     }
41     const content = {
42         template: '#content',
43         data(){
44           return {
45               field:{}
46           }
47         },
48         mounted(){
49             var id =this.$route.params.id;
50             for(let k=0;k<data.length;k++){
51                 if(data[k].id==id){
52                     this.field = data[k];
53                 }
54             }
55         }
56     }
57     let routes = [
58         {path: '/', component: home},
59         {path: '/content/:id', component: content,name:'content'},
60     ];
61     //要把组件交给路由器
62     let router = new VueRouter({routes});
63     new Vue({
64         el: '#hdcms',
65         router
66     });
67 </script>
68 </body>
69 </html>