vue的路由初识01

今天就做了一个vue-router的实例，（路由跳转，参数的传递[一个参数，多个参数]）
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../vue.js"></script>

　　 <script src="../vue_router.js"></script>

    </head>

    <body>

        <div id="app">

          <p>
　　　　　　//传递一个参数

          <router-link to="/user/foo">/user/foo</router-link> <br>

          <router-link to="/user/foo/git/3333">/user/foo/git</router-link> <br>

          <router-link to="/user/foo/profile">/user/foo/profile</router-link> <br>

          <router-link to="/user/foo/getObj/65">by path</router-link> <br>

          //传递多个 参数（通过路由 的名字进行路由的跳转）

         <router-link :to="{name:'getObjs',params:{age:'53',name:'刘德华'}}">/user/foo(by name)</router-link>

      　  </p>

 　　　　 <router-view></router-view>

　　　　</div>

    </body>

</html>

<script>

    const User = {

  template: `

    <div class="user">

      <h2>User----- {{ $route.params.age}}</h2>

      <router-view></router-view>

    </div>`

}

const UserHome = { template: '<div>{{$route.params.id}}-----username</div>' }

const UserProfile = { template: '<div>Profile</div>' }

const UserPosts = { template: '<div>Posts</div>' }

const getObj={

    methods:{

        getName:function(){

            alert(this.$route.params.age);

        }

    },
   //在模板中通过$route.params.参数名，就可以访问你传递的参数

    template:'<div> <span>{{$route.params.name}}</span> <button @click="getName">点击获取年龄</button></div>',

}

const router = new VueRouter({

  routes: [

    { path: '/user/foo', component: User,

      children: [

        // UserHome will be rendered inside User's <router-view>

        // when /user/:id is matched

        { path: 'git/:id', component: UserHome },//接收传递的参数

        // UserProfile will be rendered inside User's <router-view>

        // when /user/:id/profile is matched

        { path: 'profile', component: UserProfile },

        // UserPosts will be rendered inside User's <router-view>

        // when /user/:id/posts is matched

        { path: 'posts', component: UserPosts },

        {path:'getObj/:age',component:getObj},

        {path:'getobj',component:getObj,name:'getObjs'}//路由的名字

      ]

    }

  ]

})

const app = new Vue({ router }).$mount('#app')

</script>
巴特西

vue的路由初识01

最新文章

热门文章
