Vue学习20----编程式的导航（跳转及传值,相当于用js实现）

在 https://blog.csdn.net/zhaihaohao1/article/details/89051936 的基础上来实现

除了使用 router-link 创建 a 标签来定义导航链接，
https://blog.csdn.net/zhaihaohao1/article/details/89052469
我们还可以借助 router 的实例方法，通过编写代码来实现。
例如：登录成功或者失败，跳转不同页面

参考文档：
https://router.vuejs.org/zh/guide/essentials/navigation.html

实现方法：
第一种方法：
1在mian.js中配置
2跳转到news

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

也可以通过动态路由传参：

第二种方法，命名路由跳转到news并带参数
1在mian.js中配置name

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

2跳转到news

 this.$router.push({ name: 'news', params: { userId: '123' }})

3在news中拿到参数

this.userId=this.$route.params.userId;

下面通过例子来实现：
效果图：

项目结构：

Home跳转到News
Home跳转到Content
main.js中

import Vue from 'vue';
import App from './App.vue';

import VueRouter from 'vue-router';

Vue.use(VueRouter);

import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from "./components/Content";


const routes = [
  {path: '/home', component: Home},
  //name 是给路由命名
  {path: '/news', component: News, name: 'news'},
  {path: '/content/:aid', component: Content},

  {path: '*', redirect: '/home'}   /*默认跳转路由*/
]

const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

App.vue

Home.vue

Content.vue

News.vue

源码下载：
vuedemo20
https://download.csdn.net/download/zhaihaohao1/11112029