【VUE】vue.js中的路由router

前言：

本章节我们将为大家介绍 Vue.js 路由。

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库

中文文档地址：vue-router文档。

一、安装router：

1、直接下载 / CDN

https://unpkg.com/vue-router/dist/vue-router.js

2、CNPM

推荐使用淘宝镜像：

cnpm install vue-router  //会默认安装在node_modules文件中
//cnpm install -g vue-router //会安装在全局目录中（类似python的虚拟环境和全局环境）

二、简单路由

1. 创建路由规则文件

   1. 路径：src/router/index.js

2. 将router挂载到vue实例

   1. main.js文件中的注释5.2

3. 路由参数类型

   1. 路径参数 （params只能通过name来引入路由，path会undefined）
   2. 查询字符串参数 （query可以通过name或path来引入路由）

4. 路由跳转

   1. 使用router-link
   2. to属性可以为path路径、命名路由以及路径参数和查询字符串参数

5. element ui的案例 

步骤：

1、将example里的。。。粘贴到src/router/index.js里

路由的创建站们放到单独的文件里components/router/index.js

// track number of popstate listeners
import Vue from 'vue'
import VueRouter from 'vue-router'

// 1. Use plugin.
// This installs  and ,
// and injects $router and $route to all router-enabled child components
Vue.use(VueRouter)

// 2. Define route components 在src/router/index.js中导入子组件
import greeting from "../components/greeting";
import projectlist from "../components/projectlist";
import projectlistNew from "../components/projectlistNew";
import login from "../components/login";
import loginNew from "../components/loginNew";
import HelloWorld from "@/components/HelloWorld";

// 3. Create the router 在src/router/index.js中创建路由：一个routers数组中的一个对象，就是一条路由
const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: HelloWorld,name:'hello-world'},
        { path: '/projectlist1', component: projectlist,name:'projectlist1' },
        { path: '/projectlist2', component: projectlistNew,name:'projectlist2' },
        { path: '/login1', component: login,name:'login1' },
        { path: '/login2', component: loginNew,name:'login2' },
        { path: '/greeting', component: greeting,name:'greeting' }
    ]
});
// 4、导出路由
export default router;

main.js文件：

//导入vue.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//导入App.vue根组件
import App from './App.vue'
//5.1、导入vue router对象
import router from './router/index'
import loginNew from "@/components/loginNew";
//创建全局组件
Vue.component('login-New',loginNew);
//在导入Vue实例之前，要将element-ui插件加入到Vue中
Vue.use(ElementUI);
Vue.config.productionTip = false


new Vue({
    //5.2、把router挂载到Vue实例中去
  router,
  render: h => h(App),//渲染App根组件
}).$mount('#app')

 App.vue文件

使用路由前：

 

 不足：我们需要手动的修改路径才能跳转到不同页面

  使用路由后：

 

• 在App.vue的