脚本宝典收集整理的这篇文章主要介绍了vue-router页面跳转 以及页面配置，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

昨天自己在家做了一个前端上线系统，使用到的技术有VUE框架，element-ui, vue-router
传送门：https://github.com/liyang1234...
页面效果如下：

其中的router的使用方法和一些配置文件 webpack入口文件main.js,router的index.js内容如下：

使用router

官方例子

<script src="https://unpkg.COM/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  <div id="app">     <h1>Hello App!</h1>     <p>         <!-- 使用 router-link 组件来导航. -->         <!-- 通过传入 `to` 属性指定链接. -->         <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->         <router-link to="/foo">Go to Foo</router-link>         <router-link to="/bar">Go to Bar</router-link>     </p>     <!-- 路由出口 -->     <!-- 路由匹配到的组件将渲染在这里 -->     <router-view></router-view> </div> 

• router-link标签：跳转的链接，to=""是必须的属性，双引号中的内容是我们接下来在JS文件中定义的路由path。
• router-view标签：展示我们匹配到的组件的区域

router-link的一些属性

//to属性 string|object <!-- 字符串 --> <router-link to="home">Home</router-link> <!-- 渲染结果 --> <a href="home">Home</a>   <!-- 使用 v-bind 的 JS 表达式 --> <router-link v-bind:to="'home'">Home</router-link> <!-- 同上 --> <router-link :to="{ path: 'home' }">Home</router-link>   <!-- 命名的路由 --> <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>   <!-- 带查询参数，下面的结果为 /register?plan=PRivate --> <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>   //replace属性 true|false 不留下 history 记录。 <router-link to="home" replace>Home</router-link>   //apPEnd属性 true|false 追加路径 <router-link to="home" append >Home</router-link>   //tag属性 string 设置渲染标签 <router-link to="/foo" tag="li">foo</router-link> <!-- 渲染结果 --> <li>foo</li>   //active-class 属性 string 激活时使用的 CSS 类名      // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)           // 1. 定义（路由）组件。     // 也可以从其他文件 import 进来     const Foo = { template: '<div>foo</div>' }     const Bar = { template: '<div>bar</div>' }           // 2. 定义路由     // 每个路由应该映射一个组件。 其中"component" 可以是     // 通过 Vue.extend() 创建的组件构造器，     // 或者，只是一个组件配置对象。     const routes = [         { path: '/foo', component: Foo },         { path: '/bar', component: Bar }     ]           // 3. 创建 router 实例，然后传 `routes` 配置     // 你还可以传别的配置参数, 不过先这么简单着吧。     const router = new VueRouter({         routes // （缩写）相当于 routes: routes     })           // 4. 创建和挂载根实例。     // 记得要通过 router 配置参数注入路由，     // 从而让整个应用都有路由功能     const app = new Vue({         router     }).$mount('#app')           // 现在，应用已经启动了！

JavaScript文件主要做的事情是：
定义路由列表，即routes。创建router实例及router配置，即router。创建和挂载根实例。
以上只是教我们用最简单的方法使用vue-router。但实际开发过程中，首先我们的vue组件显然不会只有一个template模板这么简单，会用到vue的单文件组件；
其次我们通常会希望<router-view>的范围是整个页面，而不是像现在这样一直有几个碍眼的导航存在于页面上，这就需要先定义好默认状态下<router-view>显示的内容。

既然是单页应用（SPA），那么整个项目有以下三个文件是必要的:
一个htML文件：index.html
一个webpack打包时的入口js文件：main.js
一个根vue组件，作为其他组件的挂载点：app.vue

用vue-cli生成webpack打包的vue项目

npm install webpack -g npm install vue-cli -g //打开要创建的项目路径目录，创建项目 vue inIT webpack-simple <项目名> cd <项目名> npm install vue-router --save npm run dev 

生成的项目类似这样的：

在components下面新建两个vue文件 index.vue和hello.vue

//index.vue <template>  <div>      <h2>Index</h2>      <hr>      <p>{{sContent}}</p>  </div> </template> <script>  export default{      data(){          return {              sContent:"This is index components"          }      }  } </script>  //hello.vue <template>  <div>      <h2>Hello Vue.js</h2>      <hr/>      <p>{{sContent}}</p>  </div> </template> <script>  export default{      data(){          return {              sContent:"This is hello components"          }      }  } </script> 

修改main.js文件

//引入并安装vue-router插件 import Vue From 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); //引入index.vue和hello.vue组件 import App from './App.vue'; import index from './components/index.vue'; import hello from './components/hello.vue'; //定义路由 const routes = [  {path:'/',component:App},  { path: '/index', component: index },  { path: '/hello', component: hello } ] //创建 router 实例，然后传 routes 配置 const router=new VueRouter({ routes }); //创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能 new Vue({ el:"#app", router }); 

修改App.vue

<template> <div>  ![](./assets/LOGo.png)  <h1>{{msg}}</h1>  <ul>    <router-link to='/index' tag='li'><a href="/index">Index</a></router-link>    <router-link to='/hello' tag='li'><a href="/hello">Hello</a></router-link>  </ul> </div> </template> 

修改index.html

<!DOCTYPE html> <html lang="en"> <head>  <;meta charset="utf-8">  <title>vue-webpack-simple</title> </head> <body>  <div id="app">      <router-view></router-view>  </div>  <script src="/dist/build.js"></script> </body> </html> 

运行效果如下：

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！&nbsp;vue，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的vue-router页面跳转 以及页面配置全部内容，希望文章能够帮你解决vue-router页面跳转 以及页面配置所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。