Vue基础知识总结：路由vue-router与脚手架的总结

脚手架：

基于node的环境：

        创建复杂vue项目的模板

安装：

         01：node.js安装  ：node -v  检测node.js是否安装成功

     

 

       02：脚手架全局安装

               npm i -g @vue/cli

 

        03：检测脚手架是否安装成功：

               vue-v

         

创建项目：

         1.切换到根目录/项目需要所在目录   cd /

          2.vue create  myvue项目     创建一个myvue的项目

  

运行项目：

         1.cd  myvue：切换到项目目录

         2.npm  run serve :  运行项目

 

 

.vue文件：

   1.vue组件

    2.复习vue的语法

    3. 加载提示组件

props：

什么时候用props：当数据不需要修改，且需要从父组件获取

父子组件可以利用pros直接传值，在子组件中定义props，并可规定传值类型，当父组件使用子组件时传入相应参数，即可把父组件的数值传递到子组件中。

父组件App.vue

<template>
  <div id="app"> 
    {{msg}}
    <hellochange :msgchange=msgdata></hellochange>
  </div>
</template>

<script>
import HelloChange from './components/HelloChange.vue'

   export default {  
    components:{
        hellochange:HelloChange
    },   
      data () { 
        return {       
         msg:'你好vue',
         msgdata:'我是父组件传值'
        }
      }     
    }
</script>

子组件HelloChange.vue

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="hellochange">    
       {{msg}}
       <br>
       {{msgchange}}     
    </div>
</template>

<script>
    export default{
        data(){
            return {               
               msg:'我是一个home组件'             
            }
        },
        props:{
            msgchange:{
                type:String
            }
        }
    }
</script>

什么时候用data：

1,。当数据需要修改得时候

2.能用props解决就用props

spa：

SPA（single-page application），翻译过来就是单页应用

优点：

1.资源共用

2.前后端分离

3.页面切换流畅

缺点：

对SEO搜索引擎不友好

原理：

a、 前后端分离

b、减轻服务器压力

c、增强用户体验

d、Prerender预渲染优化SEO

hash路由：

1.锚点（hash）变化不会刷新页面

window.onhashchange

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})
export default router

vue清除路由历史记录：

路由跳转：

push

replace

清除路由历史记录

2.H5新增特性

  history.onpopstarte

Vue路由：

一，安装路由

    npm i vue-router

二，配置路由

       

 

在根目录下创建文件夹router，在router文件夹下创建indes.js 

在index.js文件中写入代码，实现创建一个路由器

 

三：组件

     1.    当你打开App.vue就会在里面发现这两个组件

      2.    这两个是vue给你提供的两个vue内置组件

    

 

router-link实现路由之间的跳转

router-view 当你的路由path与访问的地址相符时，会将指定的组件替换该router-view

路由配置2

普通：

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

传参：

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

子路由：

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

404：

1. 配置在最后面
2. path值为*
{
   path:"*",
   component:NoMatch
}

路由的别名：

{
   path:"/",
  alias:["/index","/main"]
}

$route:当前路由信息：

name：名称

params：路由参数

 path：路径

fullPath：全路径

query：查询参数

hash：哈希

meta：元信息

四。路由组件：

           

router-link
切换路由

to属性：改变地址栏

to="/user"

:to="'/user'"

:to="{name:'user',params:{},query:{}}"

:to="{path:''/produce/123'}"

router-view：存放路由

五。编程跳转：

1.  this.$router.push()

1.不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

2.  this.$router.go(n)

this.$router.go(n)
// 向前或者向后跳转n个页面，n可为正整数或负整数
 
// 在浏览器记录中向前进一步，等同于history.forward()
router.go(1)
 
// 后退一步记录，等同于history.back()
router.go(-1)

3..this.$router.replace()  (用法同上，push)

4。

$ router和$ route的区别
$router : 是路由操作对象，只写对象
$route : 路由信息对象，只读对象

$ router操作路由跳转

this.$router.push({ name:‘hello’, params:{ name:‘word’, age:‘11’ } })

$route读取 路由参数接收

var name = this.$route.params.name;