标签：page module mod pre set 简单 nod ret char
参考代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>路由简单测试-2</title> </head> <body> <div id="app"> <router-link to="/">首页</router-link> <router-link to="/news">新闻</router-link> <router-link to="/news/2222">带参数新闻2</router-link> <router-link to="/news?userId=3333">带参数新闻3</router-link> <hr> <router-link to="news">[当前路径上/新闻1]</router-link> <router-link :to="{name:‘namenews2‘,params:{userId:2222}}">[带参数新闻2]</router-link> <router-view></router-view> </div> <script src="../js/vue.js"></script> <script src="../node_modules/vue-router/dist/vue-router.js"></script> <script> const indexTmp = Vue.extend({ template:‘<div><h2>{{msg}}</h2><button @click="routerTo">click here to news page1</button><button @click="routerTo2">click here to news page2</button><button @click="routerTo3">click here to news page3</button></div>‘, data() { return{ msg: ‘Welcome to gCode Teacher!‘ } }, methods:{ routerTo(){ this.$router.push({name:‘namenews‘,params:{userId:1111}}); }, routerTo2(){ this.$router.push({name:‘namenews2‘,params:{userId:2222}}); }, routerTo3(){ this.$router.push({name:‘namenews3‘,params:{userId:3333}}); } } }); const newsTmp = Vue.extend({ template: ‘<div>this is the news page1. params.userId is: {{this.$route.params.userId}}--query.userId is:{{this.$route.query.userId}}</div>‘ }); const newsTmp2 = Vue.extend({ template: ‘<div>this is the news page2. param.userId is: {{this.$route.params.userId}}--query.userId is:{{this.$route.query.userId}}</div>‘ }); const newsTmp3 = Vue.extend({ template: ‘<div>this is the news page3. param.userId is: {{this.$route.params.userId}}--query.userId is:{{this.$route.query.userId}}</div>‘ }); const index = Vue.component(‘index‘,indexTmp); const news = Vue.component(‘news‘,newsTmp); const news2 = Vue.component(‘news2‘,newsTmp2); const news3 = Vue.component(‘news3‘,newsTmp3); const router = new VueRouter({ routes: [ {path: ‘/‘,name:‘namenullindex‘,component:index}, {path: ‘/index‘,name:‘nameindex‘,component:index}, {path: ‘/news/:userId‘,name:‘namenews2‘,component:news2}, {path: ‘/news?userId=:userId‘,name:‘namenews3‘,component:news3}, {path: ‘/news‘,name:‘namenews‘,component: news } ] }); const app = new Vue({ el: ‘#app‘, router: router }); </script> </body> </html>
标签：page module mod pre set 简单 nod ret char
原文地址：https://www.cnblogs.com/dshow/p/14286783.html
