争怎路由网/路由器百科/内容

怎么在vue项目中使用路由(vue中路由的使用)

路由器百科2024-11-26 阅读

1:vue-router

(1)是基于路由和组件的

路由由用于设定访问路径,将路径和组件映射进来。

在vue-router的单页面应用中,页面的路径的改变就是组件的切换。

2:安装

npm install vue-router --save:3使用

3:使用

在模块化工程中使用它,因为它是一个插件,所以可以通过Vue.use()来安装路由功能。

第一步:导入路由对象 并且调用Vue。use(VueRouter)

第二步:创建路由实例,并且传入路由映射配置

第三步:在Vue实例中挂载创建的路由实例

4:实际配置

安装完会多一个文件夹

5:项目实战

1:导入路由

import Vue from 'vue' // 想使用Vue 上边在引入vue import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import App from "../App";

2:通过Vue.use(路由对象)

Vue.use(Router)

3:创建路由对象

export default new Router({ // 配置路由和组件的应用关系 routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] })

4:将Router传入到vue实例中,挂载上

// 在main.js页面挂载 import router from './router' new Vue({ el: '#app', router, components: { App }, template: '' }

6:子路由(配置路由和组件之间的应用关系)

// 第一步:创建路由组件 import HelloWorld from '@/components/HelloWorld' // 第二步:引入 routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ]

7:使用路由

通过: 首页

1:该标签是一个vue-router中已经内置的组件,它会被渲染成一个标签.

会根据当前的路径,动态渲染出不同的组件。2:

默认渲染首页的内容? 如何让

routes: [ { path: '/', redirect: '/home' } ]

8:传递参数

this.$router.push('/home') this.$router.replace('/home')

11:通过点击事件跳转路由。

active-class:当路由匹配成功的时候会加一个class。

replace:不会留下history记录,所以指定replace的情况下,后退键不能返回到上一个页面。

而不是a(默认是a)

tag: 可以指定router-link之后渲染成什么组件,比如上面的代码被渲染成li、

首页

10:router-link 别的属性

export default new Router({ routes: [], mode: 'history' })

mode: 'history'

默认是hash模式.,怎么改成history?

http://localhost:8081/#/home

9:去掉路径后面#



……

相关阅读