vue的路由初识01

Posted 2020-09-29 BD_evel

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的主要内容，如果未能解决你的问题，请参考以下文章

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