vue 路由别名路由跳转

Posted 2021-11-09 spinoza

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 路由别名路由跳转相关的知识，希望对你有一定的参考价值。

 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>

以上是关于vue 路由别名路由跳转的主要内容，如果未能解决你的问题，请参考以下文章

Vue路由重定向、别名与导航守卫

Vue Router 重定向&别名

VSCode自定义代码片段11——vue路由的配置

如何在vue中实现路由跳转判断用户权限功能

vue 路由别名 路由跳转

vue 路由别名路由跳转