vue-router页面跳转以及页面配置

molyzzx 发布于2019-08-29 16:52 / 1853人阅读

摘要：创建实例，然后传配置你还可以传别的配置参数不过先这么简单着吧。创建实例及配置，即。

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

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

使用router

官方例子





    Hello App!

    
        
        
        
        Go to Foo
        Go to Bar

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

router-view标签：展示我们匹配到的组件的区域

router-link的一些属性

//to属性 string|object

Home

Home
 

Home

Home
 

User
 

Register
 
//replace属性 true|false 不留下 history 记录。
Home
 
//append属性 true|false 追加路径
Home
 
//tag属性 string 设置渲染标签
foo

foo
 
//active-class 属性 string 激活时使用的 CSS 类名

    // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
     
    // 1. 定义（路由）组件。
    // 也可以从其他文件 import 进来
    const Foo = { template: "foo
" }
    const Bar = { template: "bar
" }
     
    // 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的单文件组件；
其次我们通常会希望的范围是整个页面，而不是像现在这样一直有几个碍眼的导航存在于页面上，这就需要先定义好默认状态下显示的内容。

既然是单页应用（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



//hello.vue

修改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

修改index.html



 
 vue-webpack-simple

运行效果如下：

GPU云服务器云服务器页面跳转跳转javaee页面跳转页面代码子页面跳转

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113962.html

vue-router页面跳转以及页面配置

摘要：创建实例，然后传配置你还可以传别的配置参数不过先这么简单着吧。创建实例及配置，即。昨天自己在家做了一个前端上线系统，使用到的技术有VUE框架，element-ui, vue-router传送门：https://github.com/liyang1234...页面效果如下： showImg(https://segmentfault.com/img/bVbhLN4?w=1297&h=66...

付伦 2019-08-02 11:39 评论0 收藏0
vue-router页面跳转以及页面配置

摘要：创建实例，然后传配置你还可以传别的配置参数不过先这么简单着吧。创建实例及配置，即。昨天自己在家做了一个前端上线系统，使用到的技术有VUE框架，element-ui, vue-router传送门：https://github.com/liyang1234...页面效果如下： showImg(https://segmentfault.com/img/bVbhLN4?w=1297&h=66...

qpwoeiru96 2019-08-23 12:13 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

tommego 2019-08-23 12:55 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

jhhfft 2019-08-02 11:56 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

frontoldman 2019-08-29 17:11 评论0 收藏0