vue-router路由

route：路由，我们可以理解为单个路由或者某一个路由。this.$route表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等方法；

routes：多个路由的集合，JS中表示多种不同状态的集合的形式只有数组和对象两种，事实上官方定义routes是一个数组；故而routes表示多个数组的集合；

router：译为路由器，上面都是路由，这个是路由器，可以理解为一个容器包含上述两个或者说它是一个管理者，负责管理上述两个；举个常见的场景的例子：当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由；

根据不同的 url 地址展示不同的内容或页面，无需依赖服务器根据不同URL进行页面展示操作

在项目 命令下输入
npm install vue-router --save来安装vue-router

后再router文件下的index.js中使用：

1. 导入路由对象，并且调用Vue.use(VueRouter)
2. 创建路由实例，并且传入路由映射配置
3. 在Vue中挂载创建的路由实例

介绍：

将组件(components)映射到路由(routes)， 然后告诉 vue-router 在哪里渲染它们。

// 1. 定义、引用（路由）组件。
const Foo = { template: '<div>foo</div>' }
import Bar from '@/views/bar.vue'

// 2. 定义路由
const routes = [
  { path: '/foo', name: 'foo', component: Foo },
  { path: '/bar', name: 'bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。通过 router 配置参数注入路
const app = new Vue({
  router
}).$mount('#app')

组件

> <router-link to="/classView/123">go to class</router-link>
> <router-link :to="{ name: 'classView' }">go to class</router-link>
> <router-link>  切换路由 to=“/user”切换路由地址
> <router-view> 存放路由

1.路由配置（router/index）

path:”/user”,
name:”user”,
component:()=>import()
}

2.传参：

<router-link to=”product/1”> 在页面中获取 $route.params.id

3.要配置在最后 在router {path: ” * ” }

4.编程式路由跳转 $router

前进   forward或者go(1)
后退   back() 或者 go(-1)
切换路由 push(“/about”)
替换路由 replace(“/abou”)[不留当前历史记录]

5.路由信息$router----路由参数params

路由信息$route:

路由参数 params
查询 query
地址 path
全地址 fullPath
名称 name
哈希值 hash

例：

router.js
Home.vue：

OneView 和TwoView 以此一样创建

*重定向：

应用场景：比如访问根目录，自动跳转到登录页
访问根目录，自动跳转到home页面

router.js:

导航守卫：

如图：

全局前置：

路由元信息：

路由查询参数

传递 next(“/login?redirect=/cart”)
获取 var redirect = this.$route.query.redirect| | ‘/user’