vue学习笔记-编程式导航及hash模式（18）

vue编程式导航及hash模式

接着（16）讲，在home组件点击按钮跳转到news组件

1.以js的方式跳转

<template>
  <div id="home">
    {{msg}}
    <br>
    <button @click="goNews">通过js跳转到新闻页面</button>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        msg:'我是home组件',
      }
    },
    methods:{
      goNews(){
        //this.$router.push({path:'news'}) //跳转到新闻页面
        this.$router.push({path:'/content/499'}) //跳转到新闻详情页面aid为499的详情
      }
    }
  }
</script>

2.以命名路由的方式跳转
在main.js里面 给News取个名字

//{ path: '/news', component: News },
{ path: '/news', component: News , name:'news'},

回到home

goNews(){
        //this.$router.push({path:'news'}) //跳转到新闻页面
        //this.$router.push({path:'/content/499'}) //跳转到新闻详情页面aid为499的详情
        //this.$router.push({ name: 'news' , params:{ userId: 123 }}) //动态路由跳转
        this.$router.push({ name: 'news'})
      }

路由history模式

原路由

在main.js里面 加入 mode: ‘history’,

const router = new VueRouter({
	mode: 'history', /* hash模式改为history模式*/
  	routes // (缩写) 相当于 routes: routes
})

现在路由

注意：使用history模式要配合后台服务器 Apache nginx 或者原生node.js 做一些配置