1、使用vue脚手架创建vue项目，使用webpack管理项目全球设置脚手架
NPM install-g @ vue/CLI # oryarnglobaladd @ vue/CLI vue脚手架更新工具
使用npm update -g @VUE/cli#或yarnglobalupgrade-- latest @ vue/CLI创建vue项目
VUE3.x方式vue create hello-worldVUE2.x方式$ NPM安装- g vue-CLI//安装工具$vueinitwebpackmy-project//cmd命令行中
npmrunbuildnpminstall-g serve #-s参数设置为单页应用程序模式。 #此模式处理后面介绍的路由问题。 serve -s dist 2的启动、项目结构
3、安装路由NPM安装vue-router部署路由
importvuefrom ' vue ' importvuerouterfrom ' vue-router ' vue.use (vue router ) )可以编写n个组件，组件的使用必须由根组成
div id='app' h1Hello App！ /h1 p！ 使用router-link组件进行导航.--！ -在传递的`到'属性中指定链接.----！ 默认情况下，-- router-link渲染为` a '标签。 --router-link to='/foo ' gotofoo/router-link router-link to='/bar ' goto bar/bar -路由到出口- -！ -具有匹配路由的组件在此处渲染- -具有匹配路由的路径组件是
路由器- view /路由器- view本文档通常使用路由器实例。 请注意，this.$router和router的使用方式完全相同。 使用this.$router的原因是不想为需要封装路由的每个组件导入路由
路由匹配
const user={ template : ' div user/div ' } const router=newvue router ({ routes 3360 (/动态路径参数以冒号开头) (path 3: )
一个“路径参数”用冒号：标记。 如果匹配根，则参数值设置为this.$route.params，可在每个组件中使用。 然后，可以更新用户模板以输出当前用户的ID :
const user={ template : ' div user { { $ route.params.id }/div ' }可以在单个路由中设置多个“路径参数”。 所有对应的值都设置为$route.Params。 例如：
模式匹配路径$ route.params/user/:用户名称/user/Evan { username : ' Evan ' }/user/:用户名称/post/3360 post_id: '123' }除了$route.params外，$route对象还提供有用的信息，如$route.query (可以查看API文档的详细说明)。
嵌套根
const router=newvue router ((routes : ) path: )/user/:id )、component: User、children3360 ) /当)
/user/:id/posts 匹配成功 // UserPosts 会被渲染在 User 的 <router-view> 中 path: 'posts', component: UserPosts } ] } ]})要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
4、编程式导航除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
router.push(location, onComplete?, onAbort?)注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
rxdct点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。
声明式编程式<router-link :to="...">router.push(...)该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：
// 字符串router.push('home')// 对象router.push({ path: 'home' })// 命名的路由router.push({ name: 'user', params: { userId: '123' }})// 带查询参数，变成 /register?plan=privaterouter.push({ path: 'register', query: { plan: 'private' }})注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：
const userId = '123'router.push({ name: 'user', params: { userId }}) // -> /user/123router.push({ path: `/user/${userId}` }) // -> /user/123// 这里的 params 不生效router.push({ path: '/user', params: { userId }}) // -> /user同样的规则也适用于 router-link 组件的 to 属性。
注意： 如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。
router.replace(location, onComplete?, onAbort?)跟 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) 5、命名路由有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。
const router = new VueRouter({ routes: [ { path: '/user/:userId', 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 路径。
6、视图命名有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。
<router-view class="view one"></router-view><router-view class="view two" name="a"></router-view><router-view class="view three" name="b"></router-view>一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：
const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ]}) 7、重定向和别名重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：
const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ]})重定向的目标也可以是一个命名的路由：
const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ]})甚至是一个方法，动态返回重定向目标：
const router = new VueRouter({ routes: [ { path: '/a', redirect: to => { // 方法接收 目标路由 作为参数 // return 重定向的 字符串路径/路径对象 }} ]})/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
上面对应的路由配置为：
const router = new VueRouter({ routes: [ { path: '/a', component: A, alias: '/b' } ]})“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。
8、路由组件传参在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
使用 props 将组件和路由解耦：
const User = { props: ['id'], template: '<div>User {{ id }}</div>'}const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true }, // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项： { path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ]})如果 props 被设置为 true，route.params 将会被设置为组件属性。
如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。
本人菜鸟一枚，如写的有问题，请各位大佬指评