Vue路由学习笔记

路由环境脚手架安装

• 基于node.js环境 创建复杂vue项目模板
• 安装 node.js安装=>脚手架全局安装npm i -g @vue/cli=>检测是否安装成功 vue -V
• 创建项目 vue create myvue
• 运行项目 npm run serve

Vue路由

vue-router的理解

vue的一个插件，专门用来实现SPA应用。（单页面应用程序，点击页面中的导航链接不会刷新页面，只会做页面的局部更新）

路由的基本使用

• 在Views文件夹中创建.vue的文件
• 在router文件夹中的index.js中配置信息
  { path: '/user', name: 'user', component: () => import('../views/UserView.vue') },
• 在App.vue中应用

<div id="app">
		<!-- 使用路由 to表示要去的路由-->
		<router-link to="/user">去用户中心</router-link>
		<router-link to="/about">关于</router-link>
		<!-- 路由出口 匹配路由对应的组件 -->
		<router-view></router-view>
	</div>

路由的配置

• 普通

{
path:'/user',
name:'user',
component:()=>import()
}

• 传参

传参
 {
 path:'/produce/:id',
 name:"",
 component:()=>import()
}

• 子路由

{path:'/admin',
  name:'admin',
​component:()=>import()
children:[{
       path:'dash',
      component:()=>import()
      ​},
      {path:'',redirect:'dash'}//重定向
​]
​}

编程跳转

• $router.push(“/”)跳转并添加一个历史记录
• $router.replace(‘/’)跳转替换，不留当前历史记录
• $router.back()返回 $router.forward()前进
• $router.go(-1)返回一步 $router.go(1)前进一步