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 [email protected] 
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')

• 使用-组件的渲染

命名路由

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

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

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

User

这跟代码调用 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: '
home
' }
const Foo = { template: `
  

    

      to Foo1
      to Foo2
      to Foo3  
    
    
  
  ` }
const Bar = { template: '
bar
' }
const Foo1 = { template: '
Foo1
' }
const Foo2 = { template: '
Foo2
' }
const Foo3 = { template: '
Foo3
' }

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 },
]

声明式导航与编程式导航

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

【router.push(location)】

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

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

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

history

当点击 时，这个方法会在内部调用，所以说，点击 等同于调用 router.push(...)

声明式     　　　　　　　　　　　　编程式
     router.push(...)

在@click中，用$router表示路由对象，在methods方法中，用this.$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.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中组件定义方式：

1. 使用import 把组件导入,然后component值为导入的名。

   import HelloWorld from './components/HelloWorld.vue'
   component: HelloWorl
   

2. 直接设置在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"

  全局配置 默认的激活的 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属性

导入CSS文件

使用@import url方式

类名冲突的解决

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

导入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路由分离

1. src目录下建立router文件夹 router文件夹里新建index.js文件
2. index.js 引入vue、vue-router、使用、配置路由规则、实例化vue-router
3. 导出实例化对象
4. 在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