今天就做了一个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>
时间： 2024-08-06 03:26:30