vue-router配置和使用_vue export default routes;-CSDN博客

本文链接：https://blog.csdn.net/weixin_43606809/article/details/101080680

安装

命令行cnpm install vue-router --save
如果你在安装脚手架的时候选择安装了路由，那么在你的目录下找到router文件夹的index.js,在这里配置你的路由
打开这个index.js应该有这些东西：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

//export default 是对外暴露这个配置
export default new Router({
  routes: []
})
/**
你的可能跟我的有些不一样，我这里删除了原先定义的路由

2.如果你安装脚手架的时候没有选择安装路由,那就在src目录下
新建一个router文件和一个index.js,在这个js文件里配置全部
路由，推荐把路由配置文件单独抽离出来

这样做完之后，打开main.js,使用下路由

*/

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

//这里引入你刚才定义的 router下的index.js
/*
	注意：只有是index.js的文件，引入的时候不用像下边这样写
	import router from './router/index.js',
	可以省略掉indx.js,而如果是其它的名字就要引入全部
	比如：import router from './router/router.js'
*/
import router from './router'

new Vue({
  el: '#app',
  router, // 引入后在这里使用下
  components: { App },
  template: '<App/>'
})

配置

在route/index.js中写入

import Vue from 'vue'
import Router from 'vue-router'
// 引入用到的组件
import HelloWorld from '@/components/HelloWorld'
import Content from '../components/content'
import Test from '../components/test'
import first from '../components/first'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/helloworld',   //跳转路径
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/content/:aid', // 动态路由
      name: 'content',
      component: Content
    },
    {
      path: '/test',
      name: 'test',
      component: Test
    },
    {
      path: '/first',
      name: 'first',
      component: first
    },
    {
      path: '*',    // 当都不是以上跳转路径的时候（存放错误情况）
      name: 'first',
      component: first
    }
  ]
})

在App.vue中写入<router-view></router-view>

如果你的地址栏带了一个#号，看的不舒服，可以配置history模式在实例化路由（routes: [）前加上mode:'history'

使用

动态路由

在需要跳转的组件里加入
<router-link :to="'/content/'+key">{{key}}<router-link>
在对应的页面可以获取数值
this.$route.params

get传值

在需要传值的组件里加入
<router-link :to="'/content?'+key">{{key}}<router-link>
在对应的页面获取数值
this.$route.query

跳转路由

实际开发中，我们可能会需要自己会进入到某一个特定的路由，你就需要在代码中加入：router.replace(path)和router.push(path)，该方法接收传参:
举个例子：

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

**router.go(n)方法**

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，
类似 window.history.go(n)。

例子
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

嵌套路由

routes: [
	path: '/user',
	name: 'user',
	component: User,
	children: [
	{
		path: 'adduser',
		name: 'adduser',
		component: adduser
	}
	{
		path: 'addlist',
		name: 'addlist',
		component: addlist
	}
]