Vue Router学习笔记

引入VueRouter

const app = new Vue({
    new VueRouter({
        routes: [
            {
                path: '/home',
                component: Home
            },
            {
                path: '/about',
                component: About
            },
            {
                path: '/user',
                name: 'userIndex',
				// 下面这个属性也不少,因为,我们是先进入userIndex页面,才能进入子路由,模板中包含 <router-view/>
                component: userIndex,
                children: [
                    {
						// 子路由的路径前面是没有根路径('/')的
                        path: 'login',
                        name: 'login',
                        component: login
					},
                    {
                        path: 'registUser',
                        name: 'registUser',
                        component: registUser
					}
                ]
			},
        ] // routes: routes 的简写
    })
}).$mount('#app')

$router.push跳转页面

传递url字符串

this.$router.push('/admin/blog/add');

传递JSON对象参数

this.$router.push({
    path: '/admin/blog/add',
    query: {
        id: rowItem.id,
        tagObj: rowItem
    }
});

获取JSON对象中的参数

this.$route.query

restful传递参数

{
	path: "/user/:id",
	name: "user",
	component: user
}

命名路由

// 当使用对象作为路由的时候,to前面要加一个冒号,表示绑定

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>   

router-link指令传递参数

<router-link to="/home/phone">手机</router-link>

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试