vue项目的创建和vue-router的详解

一：创建项目

• 在桌面创建一个新的文件夹，点开新建文件夹在地址位置输入cdm打开黑窗口，然后子啊黑窗口中输入vue create 项目名  创建一个项目。

• 选择要创建项目的类型 这里我通过方向键的上下键选择最后一个的自定义类型

• 对项目中需要的内容进行选择    通过空格来进行选择和取消选择

•  选择vue.js的版本 这里我们选择vue2.x的版本   通过方向键来进行选择

• 选择路由的模式 输入y就是选择了history模式  ，输入n就是选择了hash模式  我们现在hash模式输入n

• 选择css的预处理器 我们选择less

• 选择是否把设置的文件单独放在一个文件夹中还是放在package.json文件夹里 这里我们选择放在一个文件夹中

• 选择是否把刚刚的设置保存下来 如果保存下来输入y回车在输入名字 如果不需要保存下来就输入n

• 现在项目成功创建好了 系统提示了两句话 一句是 “cd project02”表示进入这个项目 “npm run serve” 运行项目 依次输入着两句话
• 在将黑窗口返回的网址复制到浏览器上进行查看

 二：vue-router

vue-router是基于路由和组件的

• 路由用户设定访问路径的，将路径和组件映射起来。
• 在vue-router的单页面应用中，页面的路径的改变就是组件的切换

vue-router实现原理 

SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面;vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式；根据mode参数来决定采用哪一种方式。

1、Hash模式：

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据

2、History模式： 

由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

router-link

组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的  标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

 to

• 类型: string | Location

• required

  表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

 active-class

• 类型: string

• 默认值: "router-link-active"

  设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

 router-view

  组件是一个 functional 组件，渲染路径匹配到的视图组件。 渲染的组件还可以内嵌自己的 ，根据嵌套路径，渲染嵌套组件。

name

• 类型: string

• 默认值: "default"

  如果 设置了名称，则会渲染对应的路由配置中 components 下的相应组件。

 vue-router核心要点

vue-router如何参数传递

①用name传递参数

在路由文件src/router/index.js里配置name属性

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
]

②通过 标签中的to传参

这种传参方法的基本语法：

valueString

③vue-router 利用url传递参数----在配置文件里以冒号的形式设置参数。

我们在/src/router/index.js文件里配置路由

{
    path:'/params/:newsId/:newsTitle',
    component:Params
}