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>

运行效果如下:

原文地址:https://www.cnblogs.com/qianduanwriter/p/11832772.html

时间: 2024-10-23 12:35:39

vue-router页面跳转 以及页面配置的相关文章

JAVASCRIPT实现的WEB页面跳转以及页面间传值方法

在WEB页面中,我们实现页面跳转的方法通常是用LINK,BUTTON LINK ,IMG LINK等等,由用户点击某处,然后直接由浏览器帮我们跳转. 但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用JAVASCRIPT来实现这一跳转功能. 下面是具体的做法: 一:跳转到新页面,并且是在新窗口中打开时: 复制代码 代码如下: function gogogo() { //do someghing here... window.open("test2.html");

jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等(二)

Index.cshtml <!-- Start of second page --> <section data-role="page" id="bar"> <header data-role="header"> <h1>Bar</h1> </header> <!-- /header --> <div role="main" class=

安卓---页面跳转---及页面传值

要实现从1个activity跳到另一个activity,这需要通过intent来实现.当然我们需要在Button按钮上绑定一个按钮按下的监听器,一旦该按钮监听到有按键按下,则通过intent将指定的第2个 activity触发,这样就完成了页面跳转的基本功能. 在工程中,每一个activity都对应一个xml文件,xml文件主要是控制各控件的位置和属性的. 1.先创建xml文件 activity_main.xml 1 <RelativeLayout xmlns:android="http:

PHP Eclipse从html页面跳转PHP页面问题

1.问题 由html页面跳转到PHP页面时,PHP页面的内容无法解析,仅仅返回PHP页面内容. 2.解决方案 将跳转到PHP页面的路径改为绝对路径 3.实例 <form action="TestPost.php" method="post" enctype="multipart/form-data"> <span style="font-size:18px;"><form action="

使用cookie记录页面跳转次数,然后从最后一级页面跳转回首页面

1.首先,给出cookie设置,获取,删除的操作函数. function setCookie(name,value) {          var Days = 30;          var exp = new Date();          exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);          document.cookie = name + "=" + escape(value) + ";

新浪微博客户端学习1--logo页面跳转login页面

插入背景图片 Android使用的图片都是png格式的,使用时不必写.png Android:layout_gravity是的此标签的位置,android:gravity指的是此标签里面的组件 给图片插入动画效果:AlphaAnimation 生成Animation对象,代表动画效果 让图片执行动画效果 让Activity全屏 在动画结束时跳转Activity

从上一个页面跳入新页面时,如何拿URL中的参数

var url = document.URL; //获取当前页面的url var urlA = url.split('?');//以url中的问号进行分割; var goodscode = urlA[1]; //这个word就能得到“中国”这个文字

2015 IOS 学习笔记 内存管理,页面跳转 ——蓝懿教育

——————————内存管理———————————————— 手动内存管理(MRC)中常用的三个方法 retain:导致内存计数+1 release:导致内存计数-1 copy:复制出来一个新的对象 和之前对象的数据可能一致 但是 不是同一个对象 此对象内存计数是1 autorelease:自动释放 当变量出了自动释放池之后会自动释放 自动释放池在项目中有很多看不见的 属性描述关键字: retain/strong: //如果是retain 会做两件事 //-(void)setNames:(NSM

关于页面跳转,登录刷新

javascript中的location.href有很多种用法,主要如下. self.location.href="/url" 当前页面打开URL页面 location.href="/url" 当前页面打开URL页面 windows.location.href="/url" 当前页面打开URL页面,前面三个用法相同. this.location.href="/url" 当前页面打开URL页面 parent.location.h