vue-router2

  • 时间:
  • 来源:互联网
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42554191/article/details/103256721

vue-router2

vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。
为了和vue.js2.0配套,vue-router的最新版本也是2.0。
中文文档:http://router.vuejs.org/zh-cn/

npm安装

推荐使用npm方式安装
npm install vue-router
如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)

如果使用全局的 script 标签,则无须如此

参考中文版文档
http://router.vuejs.org/zh-cn/.

基本例子

APP.vue HTML

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航.通过传入 `to` 属性指定链接-->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
	<ul>
	<li><router-link to="/first">点我跳转到第一页</router-link></li>
	<li><router-link to="/second">点我跳转到第二页</router-link></li>
	</ul>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

APP.vue script

<script>
	import firstComponent from './components/first-component.vue'
	import secondComponent from './components/second-component.vue'
	export default {
		name: 'app',
		data() {
			return {
				msg: 'Welcome to Your Vue.js App'
			}
		},
		components: {firstComponent,secondComponent}
	}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"
//开启debug模式,在调试模式中,Vue 会:1. 为所有的警告打印栈追踪。 2. 把所有的锚节点以注释节点显示在 DOM 中,更易于检查渲染结果的结构。
Vue.config.debug = true;

Vue.use(VueRouter); //0.使用模块化机制编程, 要调用Vue.use(VueRouter)

//1.导入或定义路由组件


import firstComponent from './components/first-component.vue'
import secondComponent from './components/second-component.vue'

// 2.创建一个路由器实例
// 并且配置路由规则,每个路由应该映射一个组件。


const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    {
      path: '/first',
      component: firstComponent
    },
    {
      path: '/second',
      component: secondComponent
    }
  ]
})

// 3. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,从而让整个应用都有路由功能
// 路由器会创建一个 App 实例,并且挂载到选择符 #app 匹配的元素上。

const app = new Vue({
      router: router,
      render: h => h(App)
}).$mount('#app')

.vue格式单文件组件

单文件模块方式使用.vue文件,需要有打包工具去解析文件才行。这里我们用webpack。
template 里是模板代码,这里一般是一个闭合的html标签,比如一个div。
style 里是css代码,这个代码是作用到整个页面的,如果只想作用到当前的模板中,需要用scoped属性
script 注意这里使用的是 es6 的代码,使用babel来编译,所以理所当然需要安装 babel
export default表示当前文件中的默认组件,这样我们通过import引入组件时,就自动引入了默认组件。

<template>
    <div>
     <app-header>
    </app-header>
   </div>
</template>

<style>
...
</style>
<script>
   import AppHeader from './AppHeader.vue'
    export default {
     name:'app',
     props:['data']
     data() {
        return {}
       },
     methods: {
       handleClick() {}
     },
     components: {
       AppHeader
     }
   }
</script>

在工程目录/src下创建components文件夹,并在component文件夹下创建一个 first-component.vue并写仿照 App.vue 的格式和前面学到的知识写一个组件。

<template>
  <div id="first-component">
    <h2>{{title}}</h2>
</div>
</template>
<script type="text/javascript">
export default {
  data () {
    return {
      title: "first component title"
    }
  }
}
</script>

<style>
</style>

使用组件

然后在 App.vue 使用组件 ( 因为在 index.html 里面定义了<div id= “ app ” >这个组件就是单页面应用的主入口,所有组件放到app这个根组件就可以显示)>
第一步,引入。在标签内的 data 代码块后面加上 components: { firstComponent }。记得中间加英文逗号!!!
第三步,使用。 在内加上
或通过路由路径显示某个组件。

运行:
在命令行转到当前工程目录中输入
npm run dev
在Chrome浏览器中输入http://localhost:8080
浏览页面内容。

动态路由匹配

我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用『动态路径参数』(dynamic segment)来达到这个效果:
const User = {
template: ‘

User

}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: ‘/user/:id’, component: User }
]
})
现在 /user/foo 和 /user/bar 都将映射到相同的路由。
动态路由,可携带参数跳转

一个『路径参数』使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。于是,我们可以更新 User 的模板,输出当前用户的 ID:

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

使用组件
/user/foo
/user/bar

嵌套路由

实际应用中的界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如:
在这里插入图片描述
借助 vue-router,使用嵌套路由配置,就可以很简单地表达这种关系。
接着上节创建的 my-simple-demo项目和刚创建的User组件及路由:
这里的 是最顶层的出口,渲染最高级路由匹配到的组件。同样地,一个被渲染组件同样可以包含自己的嵌套 。例如,在 User 组件的模板添加一个 :

const User = {
  template: `  <div class="user">
    <h2>User {{ $route.params.id }}</h2>
    <router-view></router-view>
</div>
`}
const UserHome = { template: '<div>Home</div>' }
const UserProfile = { template: '<div>Profile</div>' }
const UserPosts = { template: '<div>Posts</div>' }

要在嵌套的出口中渲染组件,需要在 VueRouter 的参数中使用 children 配置:

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        // UserHome will be rendered inside User's <router-view>
        // when /user/:id is matched
        { path: '', component: UserHome },
				
        // UserProfile will be rendered inside User's <router-view>
        // when /user/:id/profile is matched
        { path: 'profile', component: UserProfile },

        // UserPosts will be rendered inside User's <router-view>
        // when /user/:id/posts is matched
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

在App.vue中添加路由链接实现切换显示:

 <p>
    <router-link to="/user/foo">/user/foo</router-link>
    <router-link to="/user/foo/profile">/user/foo/profile</router-link>
    <router-link to="/user/foo/posts">/user/foo/posts</router-link>
  </p>

编程式的导航

除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
router.push(location)
想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
当你点击 时,这个方法会在内部调用,所以说,点击 等同于调用 router.push(…)。
在这里插入图片描述
该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:
// 字符串
router.push(‘home’)
// 对象
router.push({ path: ‘home’ })
// 命名的路由
router.push({ name: ‘user’, params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
router.push({ path: ‘register’, query: { plan: ‘private’ }})

编程式的导航例子

<button v-on:click="goProfile()">goProfile</button>
methods:{
	goProfile:function () {
		this.$router.push('/user/foo/profile')
	}
}

编程式的导航-router.go(n)

这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)。
例子
// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)
// 后退一步记录,等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用,那就默默地失败
router.go(-100)
router.go(100)

编程式的导航-router.replace(location)

跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
在这里插入图片描述

本文链接http://element-ui.cn/news/show-97.aspx