Vue-Router(一)路由配置-页面跳转-子路由-路由传递参数


1、快速入门

一、简单介绍

  • vue-router是vue官方的路由解决方案,简单易用

二、安装

  • vue-router是一个插件包,需要用npm来进行安装的。如果采用vue-cli构建初始化项目会提示安装,也可以自己使用命令安装:

npm install vue-router --save

三、解读核心文件

  • 用vue-cli构建项目之后,在src/router/index.js文件中,看到以下的路由核心文件:

// 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依赖
import Router from 'vue-router'
// 引入页面组件,命名为HelloWorld
import HelloWorld from '@/components/HelloWorld'

// Vue全局使用Router
Vue.use(Router)

// 定义路由配置
export default new Router({
  routes: [                //配置路由,这里是个数组
    {                        //每一个链接都是一个对象
      path: '/',            //链接路径
      name: 'HelloWorld',        //路由名称,
      component: HelloWorld     //对应的组件模板
    }
  ]
})

四、使用

  • 在系统入口文件main.js中注入router,代码如下:
// 引入vue框架
import Vue from 'vue'
// 引入根组件
import App from './App'
// 引入路由配置
import router from './router'

// 关闭生产模式下给出的提示
Vue.config.productionTip = false

// 定义实例
new Vue({
  el: '#app',
  router, // 注入框架中
  components: { App },
  template: ''
})

2、路由属性配置说明


export default new Router({
    mode: 'history', //路由模式,取值为history与hash
    base: '/', //打包路径,默认为/,可以修改
    routes: [
    {
        path: string, //路径
        ccomponent: Component; //页面组件
        name: string; // 命名路由-路由名称
        components: { [name: string]: Component }; // 命名视图组件
        redirect: string | Location | Function; // 重定向
        props: boolean | string | Function; // 路由组件传递参数
        alias: string | Array<string>; // 路由别名
        children: Array<RouteConfig>; // 嵌套子路由
        // 路由单独钩子
        beforeEnter?: (to: Route, from: Route, next: Function) => void; 
        meta: any; // 自定义标签属性,比如:是否需要登录
        icon: any; // 图标
        // 2.6.0+
        caseSensitive: boolean; // 匹配规则是否大小写敏感?(默认值:false)
        pathToRegexpOptions: Object; // 编译正则的选项
    }
    ]
})


3、页面跳转

一、router-link标签跳转

  • 在html标签内使用router-link跳转,相应于超链接a标签,使用方式如下:

<router-link to="/">[显示字段]</router-link>

  • to:导航路径
  • 使用示例如下:

<p>导航 :
   <router-link to="/">首页</router-link>
   <router-link to="/hello">hello</router-link>
</p>

二、编程式导航-JS代码内部跳转

  • 实际项目中,很多时候都是通过在JS代码内部进行导航的跳转,使用方式如下:

this.$router.push('/xxx')

  • 具体的简单用法:
  • (1)先编写一个按钮,在按钮上绑定goHome( )方法。

<button @click="goHome">回到首页</button>

  • (2)在

你可能感兴趣的:(Vue全家桶)