学习vue-router以及遇到问题解决记录

学习vue-router

---

之前开发移动端用的是uni-app，它里面自带路由，但随着学习不断的深入接触vue的另一个插件vue-router，写下这篇记录：

本人使用的是vue-cli加vue-route

在建立vue-cli时遇到一点小问题，就是使用Powershell建立文件夹当使用命令 npm install -g @vue/cli下载全局文件 要创建一个项目即 vue create xxxx时发现异常报错，解决方式–下意识就是百度，看大佬的解决方式，，结果大佬是通过Powershell是可以的，，用的电脑管理员身份打开，。。貌似本来就是，后来又想想。。大佬们不行的，我可以试试dos窗口，，，成功。。什么鬼，，算了暂时不纠结，，还是先学习后面再研究

安装vue-cli的步骤是:

1. 先下载这个vue-cli脚手架 npm install -g @vue/cli
2. 用这个脚手架来创建一个项目 vue create xxxx（本人安装的的是vue2）
3. 接下来就是下载vue-router命令为：npm install vue-router(采用的是默认模式)
4. 这种情况下vue-router就是相当于一个插件，虽然是将插件下载下来但是呢，这时候的脚手架不知道它是个什么东西，还得使用vue add router来告诉vue-cli它就是个插件将其融入到项目中

（默认情况下一套下来会自动生成两个示例路由）

注意哦在项目的根目录src下面会生成一个router的文件夹里面的index.js里面会出现类似下面的配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Hello from '../components/hello.vue'
import OtherHome from '../components/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/otherHome',
    name: 'OtherHome',
    component: OtherHome //() => import(/* webpackChunkName: "about" */ '../components/Home.vue')
  },{
    path: '/hello',
    name: 'hello',
    component: Hello
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

main.js如下：

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


Vue.config.productionTip = false


Vue.use(router)


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

还有一个非常重要的点就是这样的默认生成的设置会在App.vue中生成路由链接，一旦在app.vue中生成的话就会意味着在所有页面都会出现，这点和uni-app里面的情景是何其相似

---

动态路由

所谓的动态路由就是我请求的类似/about/aa,/about/bb其实它们指向的都是同一个组件

这个就是在router文件夹index.js文件里面的路由配置里面进行修改path，没错就是在路径后面加上：xx的形式

{
	 path:'/about/:id',
	 name:'about',
	 component:About
  }

还有个问题就是我的请求形式咋写，在页面上时：

 <router-link to="/about/aaa">About</router-link>
//上面这个完全当做是a标签to就是所谓的路径,动态路由主要是体现在请求路径上前面那部分跟路由配置一样后面的完全不一样
/*
path:'/about/:id',这句对应上面的就是/about/aaa,这里的id也就aaa，它被视为一个参数
*/
 <router-view/>
//这个是路由出口，也就是只要你用到路由链接就是上面的router-link时就必须使用它   

---

所谓的嵌套路由

关于嵌套路由就是被路由的界面嵌套一个组件，但这个组件是因为路由即请求路径的缘故而产生的，例如/dao/context/one,/dao/context/two,这两个组件会因为请求路径的不同而呈现在同个界面里面这是因为嵌套来形成的，实现的方式就是在配置文件里面进行配置,children

{
	  path:'/dao/:id',
	  component:Dao,
	  children: [
		  {
			  path:'oneDao',
			  component:oneDao,
		  }
	  ]
  }
  //上面配置的意思是路由路径是/dao,参数为id,/dao的子路径为oneDao，但是在路径的写法上
  //是/dao/:id/oneDao,例如要请求一个路径为/dao/one/oneDao，这个路径父路由为/dao，参数为one，子路由为/oneDao

这种写法很反人类，因为通常写法是将参数放在后面所以可以将其改为：

{
	  path:'/dao',
	  component:Dao,
	  children: [
		  {
			  path:'oneDao/:id',
			  component:oneDao,
		  }
	  ]
  }

上面这种改法完全经过试验验证绝对可以

---

编程式路由

就是说不通过类似标签而是代码的形式来进行，是不是感觉自己牢牢操控的感觉

就是不用在组件上标明

而是通过：

下面这个是全部格式

router.push(location,onComplete?,onAbort?)

例子：

router.push({ name: 'user', params: { userId: '123' }})

注意了

当使用path时要在这个路径中加参数，如果还是在params里就会失效

还有就是路由配置也得配，不配不生效哦

还有

router.replace(location,onComplete,onAbort)

它不想象push添加历史记录的哦，就是不向history添加历史记录，更加简单的意思说不向游览器添加它的跳转api之前的页面，游览器的记录只能够找到它跳转后的和之前之前的页面

还有个router.go(n)，它是用于在history向前几步向后几步的

例子如下:

router.go(1)

官方这里标明：

router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go (opens new window)很像， 实际上它们确实是效仿 window.history API 的。

Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致。

---

命名路由

为什么有命名路由这种东西，因为比如我同个页面要同时显示多个组件，不是嵌套关系，这玩意网上一堆人同样的官方代码，我不知道，我的做法是直接将

定义在目标vue文件上，但是经过试验发现完全没有效果，找官网的新手指南也没有提示

由于是新手试验，所以很蒙，官方那种写法有点吐血。

最后试验发现出口路由必须写在App.vue文件上，App.vue文件会影响到每个组件页面，没有发现在App.vue上定义的路由都是贯穿所有的页面路由页面的吗，出口肯定是放在一个固定的能够贯穿容易找的地方，那么就是App.vue，这个是我个人理解，问题解决了

<div id="home">
		<div>
			helloworld
		div>
		<router-view/>
		<router-view  name="about">router-view>
		<router-view  name="dao">router-view>
		
	div>

但是路由配置上面必须得加上相应的组件如下：

{
    path: '/otherHome',
	components: {
		about: About,
		dao: Dao,
		default: OtherHome
	}

---

重定向

这个是通过路由来重定向，这个重定向的路由一定要加路由路径定义

{
    path: '/otherHome',
	redirect:'/hello',
	components: {
		about: About,
		dao: Dao,
		default: OtherHome
	}
  },
      //下面这个一定得加上
  {
	  path:'/hello',//对应路径
	  name:'Hello',
	  component:Hello//这个是实际文件的路径引用
  }

有个点就是当你不想在所在被路由界面添加被路由随便带过来的参数以下面的长长的形式来引入：

{$route.params.id}

而是想通过{id}的形式来引入时
在被路由界面加上props属性，很熟悉的写法

export default{
		props:['id']
	}

在路由配置加上

{
	  path:'/dao/:id',
	  component:Dao,
	  props:true
 }

如果被路由的界面里面同时包括了多个组件界面的话就得在路由配置上进行调整配置，类似调整成下面的components和

{
    path: '/otherHome',
	components: {
		about: About,
		dao: Dao,
		default: OtherHome
	},
	 props:{default:true,about:false,dao:false}
  }

还有就是:

<template>
	<div>你好啊div>//一定要在template里面也就是所有内容的最外层加上div不然的话就会导致其无法呈现
template>