[Vue基础实战]路由综合测试快速Demo

参考代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue路由综合测试快速Demo</title>
</head>
<body>
  <div id="app">
    <h2>{{msg}}</h2>
    <router-link to="/">首页</router-link>
    <h2>测试1</h2>    
    <router-link to="/news">新闻</router-link>    
    <router-link to="/news/2222">带参数新闻2</router-link>
    <router-link to="/news?userId=3333">带参数新闻3</router-link>
    <router-link to="/news?userId=4444">带参数新闻4</router-link>      
    <hr> 
    <h2>测试2</h2> 
    <router-link to="news">[当前路径上/新闻1]</router-link>
    <router-link :to="{name:'namenews2',params:{userId:2222}}">[带参数新闻2]</router-link>
    <router-link :to="{name:'namenews4',params:{}}">[空参数新闻4]</router-link>    
    <router-view></router-view>   
  </div>
  <script src="../js/vue.js"></script>
  <script src="../js/vue-router.js"></script>
  <script>
    const indexTmp = Vue.extend({
      template:'<div><h2>按钮带参数测试3</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><button @click="routerTo4">click here to news page4</button></div>',
      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}});
      },
      routerTo4(){
        this.$router.push({name:'namenews4'});
      }                
      }
    });
    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 newsTmp4 = Vue.extend({
      template: '<div>this is the news page4. 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 news4 = Vue.component('news4',newsTmp4);
    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=4444',name:'namenews4',component:news4},
        {path: '/news?userId=:userId',name:'namenews3',component:news3},
        {path: '/news',name:'namenews',component: news }
      ]
    });
    const app = new Vue({
      el: '#app',
      data() {
        return{
          msg: 'Welcome to gCode Teacher!'
        }
      },
      router: router
    });
  </script>
</body>
</html>

 

posted @ 2021-01-16 17:57  dshow  阅读(118)  评论(0)  编辑  收藏  举报