Vue.js框架--路由编程式的导航 和History 模式（十九）

主要操作技能：

https://router.vuejs.org/zh

一、编程式的导航
       除了使用 <router-link> 创建 a 标签来定义导航链接，
   我们还可以借助 router 的实例方法，通过编写代码来实现

  点击 <router-link :to="..."> 等同于调用 router.push(...)。
   
     //定义导航链接
     <router-link to="/news">新闻</router-link>
  
     //(1) news 跳转到新闻
      this.$router.push({path:'news'});
      
       //detail/495 跳转到新闻详情
     this.$router.push({path:'/detail/495'});
  
      //(2) 命名的路由
     this.$router.push({name:'news'})
    {
        path: '/news',
        name:'news',   //指定名称哦！
        component: News
    }            
     
二、vue中常用的路由模式
hash(#)：默认路由模式
     —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
histroy(/)切换路由模式
     —— 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
 
 
 hash路由模式(默认)  ==> http://localhost:8080/#/detail/495
 const router = new VueRouter({
  routes
 }) 
 
 
history路由模式  ==>   http://localhost:8080/detail/495  
const router = new VueRouter({
  mode: 'history',   //history模式
  routes
})

 

编写代码：

Home.vue

<template>
	<!--所以的内容多要被根节点包含起来 -->
	<div id="home">
		<h2>首页组件
	
	   <button @click="goNews()">通过js跳转到新闻页面</button>
          
	     </h2>
	</div>
</template>

<script>
	export default {
		data() { //数据
			return {
				msg: 'I am home component!',
				list: ['product1', 'product2', 'product3']
			}
		},
		methods:{
			goNews(){
				//点击 <router-link :to="..."> 等同于调用 router.push(...)。
				//注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。
			
			
			   //第一种跳转方式
			    //news  跳转到新闻
//				this.$router.push({path:'news'});


                //detail/495 跳转到新闻详情
//				this.$router.push({path:'/detail/495'});
				
				
				//第二种跳转方式
				
				// 命名的路由
				this.$router.push({name:'news'})
				
				
			}
		}

	}
</script>

 

 

效果: 

(1) this.$router.push({path:'news'});

(2)  this.$router.push({path:'/detail/495'});

 

(3)  this.$router.push({name:'news'})