router 路由嵌套以及普通参数传递问题

最新推荐文章于 2023-09-17 00:52:54 发布

前方太黑暗

最新推荐文章于 2023-09-17 00:52:54 发布

阅读量239

点赞数 1

分类专栏： vue 文章标签： router路由嵌套 router参数获取

本文链接：https://blog.csdn.net/xcc_2269861428/article/details/102454916

版权

vue 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

项目实际开发中肯定会出现一个菜单下有几个子菜单的情况，还有一个页面跳转到另外一个页面参数传递的问题，在vue中如何实现呢，通过children来实现路由嵌套，通过$route.query、$route.params实现参数的获取

简单的页面效果（实现了路由嵌套和参数获取问题）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        .active{
          font-size:20px;
          color:red
        }
    </style>
</head>
<body>
<div id="rou">
    <p>
		<router-link to="/home">首页</router-link>
		<router-link to="/user">账户管理</router-link>
	</p>
	<router-view></router-view> 
</div>
    <template id="user">
          <div>
            <h3>参数传递</h3>
            <ul>
                <li><router-link to="/user/q?name=xcc01&pwd=123">普通查询参数</router-link></li>
                <li><router-link to="/user/rest/xcc02/456">rest风格参数</router-link></li>
            </ul>
            <router-view></router-view>
          </div>
    </template>
<script>
	const home = { template: '<div>welcome 首页</div>' }
	
	const user = { template: '#user' }

    const q = { template: '<div>普通查询参数{{$route.query}}</div>' }

    const r = { template: '<div>rest风格参数{{$route.params}}</div>' }

	const routes = [
	  { path: '/home', component: home },
	  { path: '/user', component: user,children:[
          {
            path:'q',
            component:q
          },
          {
            path:'rest/:name/:pwd',
            component:r
          }
       ]},
	  { path: '*', redirect: '/home'},//重定向
	]

	const router = new VueRouter({
	  routes: routes,
      linkActiveClass:'active' // 修改选中的css  默认为router-link-active
	})

    var aj = new Vue({
        el:'#rou',
		router:router
    })
 
</script>
</body>
</html>

需要注意的是$route.query是用来获取普通传参的也就是？号形式的。

$route.params用来获取rest风格的参数，但我们要注意在path中一定要使用/:来命名。

前方太黑暗

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
router 路由嵌套以及普通参数传递问题

项目实际开发中肯定会出现一个菜单下有几个子菜单的情况，还有一个页面跳转到另外一个页面参数传递的问题，在vue中如何实现呢，通过children来实现路由嵌套，通过$route.query、$route.params实现参数的获取简单的页面效果（实现了路由嵌套和参数获取问题）<!DOCTYPE html><html lang="en"><head&...
复制链接

扫一扫

专栏目录