• Vue-Router的使用(三) --- 编程式导航


    一、编程式导航

      编程式导航就是使用js实现页面的跳转,而不是直接在<router-link>中实现跳转。

    1.1 实现编程式导航

      实现编程式导航在js中使用this.$router.push(location, onComplete?, onAbort?)。其中第一个参数就是需要跳转的页面的路径,使用在路由中已经配置好的路径。可以有以下几种方式实现跳转。

    // 字符串
    //{ path: '/home', component: Home } 路由中已配置home
    this.$router.push('home') 
    // 对象 
    //{ path: '/home', component: Home } 路由中已配置home
    this.$router.push({ path: 'home' }) 
    // 命名的路由 
    //{ path: '/user/:userId', component: User , name: 'user'} 路由中已配置user,并且路由命名为user.
    this.$router.push({ name: 'user', params: { userId: '123' }}) 
    
    //{ path: '/register', component: Register } 路由中已配置register// 带查询参数,变成 /register?plan=private
    this.$router.push({ path: 'register', query: { plan: 'private' }}) //使用get传值的方式实现编程式动态路由

      注意:如果提供了 pathparams 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path

    const userId = '123'
    this.$router.push({ name: 'user', params: { userId }}) // -> /user/123
    router.push({ path: `/user/${userId}` }) // -> /user/123    //注意此处不是单引号 ' ,而是 `(键盘左上角的~键).使用 ${varName} 来实现动态传值
    // 这里的 params 不生效
    this.$router.push({ path: '/user', params: { userId }}) // -> /user

      

    1.2 使用上面列举的方式

      配置的路由:

    //2.定义路由
    const routes = [
      { path: '/home', component: Home },
      { path: '/news', component: News },
      { path: '/newsdetail/:index', component: NewsDetail, name: 'detail'},
      { path: '/product', component: Product },
      { path: '*', redirect: '/home' }  //表示没有匹配到是默认重定向到home组件
    ]
    

      实现js跳转的页面:<template>

    <div>
    	<div>这是home组件</div>
    	  <ul>
    		<li v-for="(msg, index) in products" :key="index">
    		   <router-link :to="'/product?index=' + index">{{msg}}</router-link>
    		</li>
    	  </ul>
    	  <button @click="toNewsPage()">到新闻页</button>
    	  <button @click="toNewsDetail()">动态路由跳到新闻详情</button>
           <button @click="toNewsDetail2()">动态路由跳到新闻详情的第二种编程时导航写法</button>
    	  <button @click="toProduct()">get传值的方式跳转到product页面</button>
    	</div>
    </template>
    
    <script>
      export default {
    	data() {
    	  return {
    		products: [
    		  "这是第一个产品",
    		  "这是第二个产品",
    		  "这是第三个产品"
    		  ]
    		}
    	  },
    	  methods: {
    	    toNewsPage() {
    		  this.$router.push({path: 'news'})
    	    },
    	    toNewsDetail() {
    		  this.$router.push({name: 'detail', params: {index: 1}})
    	    },
             toNewsDetail2() {
    
                let index = 1
                this.$router.push({path: `/newsdetail/${index}`})  
             },
    
    	    toProduct() {
    		  this.$router.push({path: 'product', query: {index: 1}})
    	    }
    	  }
    	}
    </script>
    

      

      
  • 相关阅读:
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    C 语言编程 — 使用 assert 断言进行程序设计
    C 语言编程 — uint8_t / uint16_t / uint32_t /uint64_t
    五月数据库技术通讯丨Oracle 12c因新特性引发异常Library Cache Lock等待
    4场直播丨站撸Oracle、MySQL、医疗、航空
    asyncio
    python 多线程 多进程
    一文详解被阿里腾讯视作核心机密的大数据平台架构
  • 原文地址:https://www.cnblogs.com/hebing0415/p/11782529.html
Copyright © 2020-2023  润新知