vue学习--前端路由(五、Vue Router命名路由 )

vue-router命名路由

1 命名路由的配置规则

为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。

 const router = new VueRouter({ 
    routes: [ 
      { 
        path: '/user/:id', 
        name: 'user', 
        component: User 
      } 
    ] 
  })

   <router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link> 
  router.push({ name: 'user', params: { id: 123 }})

  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
      <router-link to="/register">Register</router-link>
 
      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>
 
    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }
 
      const Register = {
        template: '<h1>Register 组件</h1>'
      }
 
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            // 命名路由
            name: 'user',
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          },
          { path: '/register', component: Register }
        ]
      })
 
      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

posted @ 2020-04-19 22:19 一纸年华阅读(21) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vue学习--前端路由(二、Vue Router基本使用)

· vue学习--前端路由(四、Vue Router动态路由匹配)

· 命名路由的配置规则

· Vue Router(5)

· 25_命名路由和编程式导航

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）

历史上的今天：
2018-04-19 反射：获取Class对象的三种方式

公告

潜藏于波涛下寂静无声

跃升于惊涛上乘风化龙...猫

昵称：一纸年华
园龄： 6年11个月
粉丝： 12
关注： 14

+加关注

2025年3月

日

一

二

三

四

五

六

一纸年华

潜藏于波涛下寂静无声，跃升于惊涛上乘风化龙

vue学习--前端路由(五、Vue Router命名路由 )

vue-router命名路由

1 命名路由的配置规则

公告

潜藏于波涛下寂静无声

跃升于惊涛上乘风化龙...猫

搜索

常用链接

我的标签

合集 (5)

随笔分类 (230)

随笔档案 (229)

相册 (12)

阅读排行榜

评论排行榜

最新评论

目录导航

	const router = new VueRouter({
	routes: [
	{
	path: '/user/:id',
	name: 'user',
	component: User
	}
	]
	})

	<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>
	router.push({ name: 'user', params: { id: 123 }})

	<body>
	<!-- 被 vm 实例所控制的区域 -->
	<div id="app">
	<router-link to="/user/1">User1</router-link>
	<router-link to="/user/2">User2</router-link>
	<router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
	<router-link to="/register">Register</router-link>

	<!-- 路由占位符 -->
	<router-view></router-view>
	</div>

	<script>
	const User = {
	props: ['id', 'uname', 'age'],
	template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
	}

	const Register = {
	template: '<h1>Register 组件</h1>'
	}

	// 创建路由实例对象
	const router = new VueRouter({
	// 所有的路由规则
	routes: [
	{ path: '/', redirect: '/user' },
	{
	// 命名路由
	name: 'user',
	path: '/user/:id',
	component: User,
	props: route => ({ uname: 'zs', age: 20, id: route.params.id })
	},
	{ path: '/register', component: Register }
	]
	})

	// 创建 vm 实例对象
	const vm = new Vue({
	// 指定控制的区域
	el: '#app',
	data: {},
	// 挂载路由实例对象
	// router: router
	router
	})
	</script>
	</body>