Vue.js 关于router-link标签

< router-link >组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址,默认渲染为带有正确连接的< a >标签,可以通过配置tag属性生成别的标签。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的css类名
< router-link >组件的属性有:
to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class

引用自 https://blog.csdn.net/lhjuejiang/article/details/81082090, < router-link >详情请看此篇文章

<!-- 这个标签是vue提供的路由功能, 页面渲染等于html的a标签。路由要在cms.js配好 -->
 <router-link class="mui-tab-item" :to="{path:'/cms/page/add', query:{
   page:params.page,
   siteId:params.siteId,
   pageAliase:params.pageAliase
 }}">

1、:to表示跳转页面的路由
2、query表示携带在路由后面的参数, 以key-value值形式


go_back: function(){
   //this.$router表示当前vue实例获取路由, 添加要返回的页面的路由就会跳转
     this.$router.push({
         path:"/cms/page/list",
         //query,附带在路由后面的参数
         query:{
             page:this.$route.query.page,
             siteId:this.$route.query.siteId,
             pageAliase:this.$route.query.pageAliase
         }
     })
 }

1、this.$ router.push表示添加路由且跳转到该路由的页面
2、this.$ route.query.page表示获取路由上的key-value值的page参数;
如果是以 route/1/这种形式的, 要用this.$route.params.page 来获取page参数


{
        //修改页面的路由,:pageId为当该路由后面接 / 参数时自动添加该参数
        path:'/cms/page/edit/:pageId', 
        name:'修改页面',
        component:page_edit,
        hidden:true
      }
发布了86 篇原创文章 · 获赞 1 · 访问量 4342

猜你喜欢

转载自blog.csdn.net/qq_42039738/article/details/105131344