vue中的路由

什么是路由？

当我们在根组件的时候，想点哪一个组价就可以挂载哪一个组件，实现这个功能的东西就是路由（动态地往根组件挂载）

vue-router配置

1.安装（官网）

npm install vue-router --save / cnpm install vue-router --save

2.在（main.js）引入并vue.use(VueRouter)

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

3.配置路由

1.创建组件，在main.js中引入组件(也可以从其他文件import进来)

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

2.main.js定义路由（此段建议复制）

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path:'*',redirect:'默认路径'}//重定向，当path为空的时候默认跳转的地址
]

3.main.js中实例化vue-router

const router = new VueRouter({
  routes // 此处是缩写，应该是： `routes: routes`（后面的router是第二步的router）
})

4.main.js中创建和挂载实例（这一步是吧上面实例化的router挂载到main.js的vue实例上）

const app = new Vue({
  router
}).$mount('#app')

5.将<router-view></router-view>放在App.vue（根组件模板）内

经过以上三步，vue的路由就配置完成！~
在url中输入需要进入的组件名（path）即可跳转到该组件中

也可以使用router-link做出类似超链接的点击，实现点击跳转：

<router-link to="/foo">去Foo</router-link>

路由实现页面跳转

1.使用js来实现跳转(常用)：

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

2.使用命名路由进行跳转：
在main.js的配置路由部分给路由起个名字

const routes = [
      { path: '/content/:aid', component: Content ,name='content'},
    ]

通过这种方式跳转：
this.$router.push({name=‘content’,params:{userId:123}})

Vue动态路由和get传值

1.动态路由传值：

在跳转前页面的router-link的地方：（给to绑定属性，然后拼接需要传的值）

 <router-link :to="'/content/'+index">
                {{limt}}
            </router-link>

在main.js里面配置动态路由：（path里面对应地加上：aid）（此处的：aid只是给传过去的值取个名字）

const routes = [
  { path: '/content/:aid', component: Content },
]

在对应的跳转后界面获取动态路由传过来的值：

this.$route.params

2.get传值

在跳转前页面的router-link的地方：（给to绑定属性，然后拼接需要传的值）

 <router-link :to="'/content/?id='+index">
            {{limt}}
        </router-link>

在对应的跳转后界面获取get传过来的值：

this.$route.query

url的history模式

一般默认的路由跳转的url是hash模式，如：
http://180.168.156.212:4101/travel/#/shouye/shouye
可见，有很丑的#
因此，我们可以将其改为history模式：
在main.js的实例化VueRouter的地方：

const router = new VueRouter({
  routes,
  mode:'history'/*将hash改为history*/
})

就可以了

父子路由（路由的嵌套）

当我们想实现下面这种功能时：

组件里面又用到了路由
就可以用到“路由的嵌套”！

首先，在main.js里面将父组件和子组件都引入：

然后，在mian.js里面讲子路由定义在父路由内：

然后在父组件的左边加上跳转连接，在右边加上<router-view></router-view>：

此时，在点击左边的链接的时候，右侧就会显示出子组件的内容了！~

路由的模块化

在项目中,main.js只有一个，因此，我们不需要将所有的东西都放在这里面，组件引入、路由引入等等。都可以分离出去为一个独立的文件，在main.js里面进行引入就可以了！~
步骤：

①在mian.js同级目录的地方，新建一个文件夹“router”

②然后在router里面建一个js文件，此处我命名为index.js

③在index.js中引入vue：

import Vue from "vue"

④将main.js里面的new vue以上，import Vue from 'vue'、import App from './App'以下的内容，全部剪切进index.js
注意！！！引入组件的路径从"./“变成了”…/"

⑤然后在index.js最后一行把这个router暴露出来：

export default router;

⑥最后，在main.js中引入这个index.js

import router from './router/index'