vue 编程式js跳转路由

Posted 2021-01-20 sulanlan

请看goNews()方法

 1 <template>
 2     <!-- 所有的内容要被根节点包含起来 -->
 3     <div id="home">    
 4        我是首页组件
 5 
 6 
 7         <button @click="goNews()">通过js跳转到新闻页面</button>
 8        
 9     </div>
10 </template>
11 
12 
13 <script>
14     export default{
15         data(){
16             return {               
17                msg:‘我是一个home组件‘
18              
19             }
20         },
21         methods:{
22 
23             goNews(){
24 
25 
26                 // 注意：官方文档写错了
27 
28 
29                 //第一种跳转方式
30 
31                 // this.$router.push({ path: ‘news‘ })
32 
33 
34                 // this.$router.push({ path: ‘/content/495‘ });
35 
36 
37 
38 
39 
40 
41 
42                 //另一种跳转方式
43 
44                     //   { path: ‘/news‘, component: News,name:‘news‘ },
45 
46 
47                     // router.push({ name: ‘news‘, params: { userId: 123 }})
48 
49 
50                     this.$router.push({ name: ‘news‘})
51 
52 
53                 
54 
55             }
56         }
57     }
58 
59 </script>
60 
61 <style lang="scss" scoped>
62     
63 </style>