Vue路由（二） – 小飞侠

使用nginx部署项目

web服务器：

TOMCAT java html

APache PHP html java

IIS asp 和 asp.net

undowtow java

nodejs 它可以部署web服务器

nginx html php 部署前端，比较流行的一个web服务器

启动 CD到nginx目录 执行 nginx 或者 start nginx  或者 直接运行nginx.exe
关闭 nginx -s stop 或 任务管理器  ctrl+alt+esc
location / {
root   E:/桌面/前端培训/code/vuecli项目/dist;
index  index.html index.htm;
}

加入win全局变量：将nginx的目录路径添加到Path中。开启nginx服务需用start nginx。

4 vue-router路由

vue-router安装

安装

在HbuilderX的项目管理器项目目录上，右键执行“使用命令行窗口打开所在目录”，在终端里输入：

npm view vue-router versions
npm install vue-router@3.2.0 
npm install vue-router@3  安装大版本3下的最高版本

官网的命令，默认时安装Vue-router4的版本，会报错。

~~npm install vue-router@4~~

安装完毕后，在node_modules文件夹里会有一个vue-router文件夹。index.js里export导出了

引入

main.js

import Vue from 'vue'
import App from './App.vue'

// 引入vue router
import VueRouter from 'vue-router'

// 使用router
Vue.use(VueRouter)

Vue.config.productionTip = false

import HelloWorld from './components/HelloWorld.vue'
import NavList from './components/NavList.vue'
import Header1 from './components/header.vue'

// 定义路由
const router = new VueRouter({
	routes: [{
			path: '/helloworld',
			component: HelloWorld
		}
	] 
})

// 挂载属性
new Vue({
	router,
	render: h => h(App),
}).$mount('#app')

使用-组件的渲染

<template>
  <div id="app">
	<router-link to="/helloworld">
		hellowrld的跳转 
	</router-link>
	<!--  渲染区域 -->
	<router-view></router-view>	
  </div>
</template>

<script>
export default {
  name: 'app',
}
</script>

<style>

</style>

命名路由

有时，通过一个名称来标识一个路由显得更方便，特别是在链接一个路由，或者是执行一些跳转时。可以在创建Router实例时，在
routes
配置中给某个路由设置名称

const router = new VueRouter({
  routes: [
    {
      path: '/user/name/profile/out',
      name: 'user',
      component: User
    }
  ]
})

要链接到一个命名路由，可以给
router-link
的
to
属性传一个对象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

这跟代码调用
router.push()
是一回事

router.push({ name: 'user', params: { userId: 123 }})

这两种方式都会把路由导航到
/user/123
路径

命名路由的常见用途是替换router-link中的to属性，如果不使用命名路由，由router-link中的to属性需要设置全路径，不够灵活，且修改时较麻烦。使用命名路由，只需要使用包含name属性的对象即可

[注意]如果设置了默认子路由，则不要在父级路由上设置name属性

<div id="app">
  <p>
    <router-link to="/" exact>index</router-link>
    <router-link :to="{ name: 'foo1' }">Go to Foo</router-link>
    <router-link :to="{ name: 'bar' }">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

const Home = { template: '<div>home</div>' }
const Foo = { template: `
  <div>
    <p>
      <router-link :to="{ name: 'foo1' }" exact>to Foo1</router-link>
      <router-link :to="{ name: 'foo2' }" >to Foo2</router-link>
      <router-link :to="{ name: 'foo3' }" >to Foo3</router-link>  
    </p>
    <router-view></router-view>
  </div>
  ` }
const Bar = { template: '<div>bar</div>' }
const Foo1 = { template: '<div>Foo1</div>' }
const Foo2 = { template: '<div>Foo2</div>' }
const Foo3 = { template: '<div>Foo3</div>' }

const routes = [
  { path: '/', name:'home', component: Home },
  { path: '/foo', component: Foo ,children:[
    {path:'',name:'foo1', component:Foo1},
    {path:'foo2',name:'foo2', component:Foo2},
    {path:'foo3',name:'foo3', component:Foo3},
  ]},
  { path: '/bar', name:'bar', component: Bar },
]

声明式导航与编程式导航

除了使用
<router-link>
创建a标签来定义导航链接，还可以借助router的实例方法，通过编写代码来实现

【router.push(location)】

应用场景：需要用js来控制跳转，比如用户登录后，跳转到首页。

想要导航到不同的 URL，则使用
router.push
方法。这个方法会向

history 栈

添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

https://www.bilibili.com/video/BV1qu411r7WT?spm_id_from=333.851.b_7265636f6d6d656e64.1
https://www.bilibili.com/video/BV1BL411c78t/?spm_id_from=333.788.recommend_more_video.-1
https://www.bilibili.com/video/BV1oz4y1U7fS/?spm_id_from=333.788.recommend_more_video.1

history

当点击
<router-link>
时，这个方法会在内部调用，所以说，点击
<router-link :to="...">
等同于调用
router.push(...)

声明式     　　　　　　　　　　　　编程式
<router-link :to="...">     router.push(...)

在@click中，用

o

u

t

e

r

表

示

路

由

对

象

，

在

m

e

t

h

o

d

s

方

法

中

，

用

t

h

i

s

.

router表示路由对象，在methods方法中，用this.

$r o u t e r 表示路由对象，在 m e t h o d s 方法中，用 t h i s .$

router表示路由对象

、

goPage2() {
    this.$router.push('/page2')
}

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

【
router.replace(location)
】

跟
router.push
很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录

声明式                 　　　　　　　　　　编程式
<router-link :to="..." replace>     router.replace(...)

【
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)

组件引入的箭头函数写法

routes中组件定义方式：
使用import 把组件导入,然后component值为导入的名。
import HelloWorld from './components/HelloWorld.vue'
component: HelloWorl
直接设置在component的值为一个匿名（箭头）函数
component: () => import('@/pages/index')

根路径

设置根路径，需要将path设置为’/’

  <p>
    <router-link to="/">index</router-link>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>

const routes = [
  { path: '/', component: Home },
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
]

404页面

const routes = [
	{
		path: '/',
		component: () => import('@/pages/index')
	}, {
		path:'*',
		component:()=> import('@/pages/404')
	},
]

路由高亮

高亮即选中状态，给路由添加高亮的类。

1 全局配置

new VueRouter实例化时，添加linkActiveClass属性，也可不填，默认名为router-link-active，在全局样式里填写

linkActiveClass

类型:
string

默认值:
"router-link-active"

全局配置
<router-link>
默认的激活的 class。

const router = new VueRouter({
	linkActiveClass:'light', // 自定义高亮的类名
	routes: [{
			path: '/', //路径
			component: Index //组件导入
		},
		{
			name: 'abc',
			path: '/page1',
			component: About
		},
		{
			path: '/page2',
			component: () => import('@/pages/news')
		},
		{
			path: '/page3',
			component: Product
		},
		{
			path: '/page4',
			component: Contact
		},
		{
			path:'*',
			component:()=>import('@/pages/404')
		}

	]
})

2 单独配置

利用：router-link的属性 active-class

active-class

类型:
string

默认值:
"router-link-active"

特殊情况

由于默认使用的是全包含匹配，即’/about’、也可以匹配到’/‘，如果需要精确匹配，仅仅匹配’/’，则需要在router-link中设置exact属性

<template>
	<div>	
		<router-link to='/' active-class="active">首页</router-link>&nbsp;
		<router-link to='/page1' active-class="active">关于我们</router-link>&nbsp;
		<router-link to='/page2' active-class="active">新闻中心</router-link>&nbsp;
		<router-link to='/page3' active-class="active">公司产品</router-link>&nbsp;
		<router-link to='/page4' active-class="active">联系我们</router-link>
	</div>
</template>

导入CSS文件

使用@import url方式

<style>
   @import url(assets/css/style.css);
</style>

类名冲突的解决

在style标签上添加 scoped 属性，使当前样式只会在该vue页面中生效。

<style scoped>
	.my-title{
		font-size: 80px;
		color: aquamarine;
	}
</style>

导入js文件

使用 export导出 import导入。 @表示src的根目录

导出单个：
let a = 100
export default a
导入：
import a from '@/assets/js/common.js'  // a 可以自定义名

导出多个：定义成一个对象导出
let a = 100
let b = 'haha'
export {a,b}

导入：
import {a,b} from '@/assets/js/common.js' // a，b名字不可修改
console.log(a,b);

router路由分离

src目录下建立router文件夹 router文件夹里新建index.js文件
index.js 引入vue、vue-router、使用、配置路由规则、实例化vue-router
导出实例化对象
在main.js里引入

router/index.js

/*index.js 引入vue vue-router、使用、配置路由规则、实例化vue-router */
import Vue from 'vue'
import VueRouter from 'vue-router';
// 使用router
Vue.use(VueRouter)

// 解决 vue 重复点击一个路由 报错
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

import Index from '@/pages/index.vue'
import About from '@/pages/about.vue'
import Product from '@/pages/product.vue'
import Contact from '@/pages/contact.vue'
// 配置路由规则
const routes = [{
		path: '/', //路径
		component: Index //组件导入
	},
	{
		name: 'abc',
		path: '/page1',
		component: About
	},
	{
		path: '/page2',
		component: () => import('@/pages/news')
	},
	{
		path: '/page3',
		component: Product
	},
	{
		path: '/page4',
		component: Contact
	},
	{
		path: '*',
		component: () => import('@/pages/404')
	}
]
const router = new VueRouter({
	routes:routes
})
export default router


main.js

import Vue from 'vue'
import App from './App.vue'
// 引入router下的index.js 只写目录 默认会导入目录下index.js
import router from './router'

Vue.config.productionTip = false


// 挂载属性
new Vue({
	router,
	render: h => h(App),
}).$mount('#app')

路由课堂练习

router-link练习

pages：

首页 index 关于我们 about 新闻中心 news 公司产品 product 联系我们 contact

comonents：

头部 header 底部 footer

this.$router.push 练习

pages：

首页 index 登录页 login

原文链接：https://blog.csdn.net/tydl206/article/details/124865215