VUE脚手架router安装,详解,二级配置,锚链接跳转

打开文件夹在路径栏里面输入cmd 打开cmd命令行

输入vue create router-pro

选择下面选项

按下键选择路由并回车：

选择vue2版本

问你是否使用路由的历史模式：

输入n

问你eslint的语法规范选择哪种？

我们选择第一个最基本的格式校验

下面问你什么时候校验语法规范？

我们选择保存的时候校验选择第一个

问是否采用最基本的校验更新到package文件？

默认选择第一个回车

问你是否配置好了？输入y

还会跳出一个选项你可以输入y 回车 也可以直接回车

/ 导入Vue构造函数 /

import Vue from 'vue'

/ 导入路由VueRouter构造函数 /

import VueRouter from 'vue-router'

/ 导入HomeView页面 /

import HomeView from '/views/HomeViewvue'

//调用构造函数Vue的use方法 传入VueRouter构造函数

//作用是把VueRouter作为一个插件 全局插入到Vue中

Vueuse(VueRouter)

/ 定义一个路由数组对象 /

const routes = [

  / 一个对象就对应了一个路由

  path就是路由的地址

  name给路由起的名字

  component 具体跳转的页面

  /

  {

    / path: '/' 根页面,表示已进入就显示的页面 /

    path: '/',

    name: 'home',

    / 这种方式一进入页面就会全部加载,不是用到的时候再加载

       性能没有懒加载的方式好 /

    component: HomeView,

    / 可以使用redirect 重定向 已进入主页就展示第一个子页面

     redirect 后面跟的是路径名 并不是name /

     / 因为/是根路径 所有可以直接写one /

    redirect:'one',

    children:[{

      path:'one',

      name:'one',

      component: () => import('/views/OneViewvue')

    }]

  },

  {

    / 这里是一级目录所以可以加/ 表示根目录 /

    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/AboutViewvue'),

    / about不是根路径 所以redirect后面要写全 '/about/aboutchild', /

    redirect:'/about/aboutchild',

    children:[{

      path:'aboutchild',

      name:'aboutchild',

      component: () => import('/views/AboutChildvue')

    }]

  },

  {

    path:'/ChildA',

    name:'ChildA',

    component: () => import('/components/ChildAvue')

  },

  {

    / path:'' 必须要放最后 /

    / path:'' 表示上面的路由没有匹配到 则进入下面的页面 /

    path:'',

    name:'notfound',

    component: () => import('/components/NotFoundvue')

  }

]

/ 实例化构造函数 VueRouter 产生一个实例化对象

   并把上面的路由数组对象routes当作参数 以对象的方式传给构造函数 VueRouter/

const router = new VueRouter({

  routes

})

/ 把实例化路由对象 router默认导出  /

export default router

/ 导入Vue构造函数 /

import Vue from 'vue'

/ 导入Appvue入口页面 /

import App from '/Appvue'

/ 导入router文件夹中的indexjs中的router实例化对象 /

/ 一个文件夹里面只有一个indexjs文件在脚手架中可以把/router/indexjs简写为/router  /

import router from '/router'

/ 生产提示 /

/ 改成false是用来关闭开发者提示 /

VueconfigproductionTip = false

/ 在Vue的对象参数里面配置 el:"#app" 等于 $mount('#app')

   都是用来挂载到id为#app的div上的/

   / 把路由实例化对象router配置在Vue中,作用是保证项目中

    所有的vue文件都可以使用router路由的属性和方法 /

new Vue({

  router,

  / 会把所有vue文件渲染到App组件上 /

  render: h => h(App)

})$mount('#app')/ 等同于 el:"#app" /

<template>

  <div id="app">

    <nav>

      <!-- router-link 组件是负责跳转的 to属性是用来写跳转路径的

          router-link组件本质上是有a标签来实现的 路由跳转的原理是根据

          锚点来的 -->

      <router-link to="/">Home</router-link> |

      <router-link to="/about">About</router-link> |

      <router-link to="/ChildA">点我跳转ChildA</router-link> |

      <router-link to="/ChildB">点我跳转ChildB</router-link> |

    </nav>

    <!-- router-view 组件是用来展示组件的容器 -->

    <router-view/>

    <!-- 创建两个组件ChildA 和ChildB 并写两个 router-link 可以实现跳转

         组件显示在 router-view 容器中 -->

  </div>

</template>

<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

nav {

  padding: 30px;

}

nav a {

  font-weight: bold;

  color: #2c3e50;

}

/ router-link-exact-active 跳转链接被激活的时候加载到router-link身上 /

nav arouter-link-exact-active {

  color: #42b983;

}

</style>

<template>

  <div class="about">

    <h1>This is an about page</h1>

    <!-- to后面写的是路径 -->

    <!-- <router-link to="/about/aboutchild">我是aboutchild</router-link> -->

    <!-- to 后面要加: 作用是把后面解析成一个对象而不是字符串 -->

    <router-link :to="{name:'aboutchild'}">我是aboutchild</router-link>

    <!-- 二级路由显示的容器 -->

    <router-view></router-view>

  </div>

</template>

<template>

  <div>

      <h1>AboutChild</h1>

  </div>

</template>

<script>

export default {

}

</script>

<style>

</style>

<template>

  <div class="home">

    <h1>KW47冲冲冲</h1>

    <router-link to="/one">ONEview</router-link>

    <!-- 二级路由对应的组件容器 -->

    <router-view></router-view>

  </div>

</template>

<script>

// @ is an alias to /src

export default {

  name: 'HomeView',

  components: {

  }

}

</script>

<template>

  <div>

      <h1>我是ONEVIwe</h1>

  </div>

</template>

<script>

export default {

}

</script>

<style>

</style>

<template>

  <div>

      <h1>我是CHildA</h1>

  </div>

</template>

<script>

export default {

}

</script>

<style>

</style>

<template>

  <div>

      <h1>我是ChildB</h1>

  </div>

</template>

<script>

export default {

}

</script>

<style>

</style>

<template>

  <div>

      <h1>我是notfound</h1>

  </div>

</template>

<script>

export default {

}

</script>

<style>

</style>

作用域：它是指对某一变量和方法具有访问权限的代码空间,在JS中,作用域是在函数中维护的。表示变量或函数起作用的区域，指代了它们在什么样的上下文中执行，亦即上下文执行环境。Javascript的作用域只有两种：全局作用域和本地作用域，本地作用域是按照函数来区分的。闭包：在js中的我的理解就是函数嵌套函数，当内部函数在定义它的作用域的外部被引用时,就创建了该内部函数的闭包,如果内部函数引用了位于外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被释放,因为闭包需要它们使用闭包要注意：1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（PublicMethod），把内部变量当作它的私有属性（privatevalue），这时一定要小心，不要随便改变父函数内部变量的值。

是前台为了实现单页面应用然后设置路径，根据不同的路径显示不同页面。但是这些路径在服务器上不是真是存在的

hash路由 默认的是hash路由

history路由

通过onhashchange()来检测路由的变化,根据不同的hash来显示不同元素。获取当前的hash值locationhash

通过onpopstate来检测history堆栈路径的变化，堆栈的路径是通过historypushState(null, '',"page=2")添加进去的

由hash路由设置成history路由，给路由添加配置项 mode="history"

1、设置相应组件

2、在router->indexjs文件中添加配置

首先引入组件，然后配置规则 {path:设置路径，name:名，component:组件}

3、在需要现在组件的地方给页面添加<router-view></router-view>

4、设置导航路径

使用vue提供 <router-link to="路径"></router-link> 默认的解析成a标签

5、设置默认路由

6、设置导航样式

1、需要定义组件

2、确定好在那个组件配置二级路由，就去那个组件的配置规则中添加children关键字，按照一级路由的配置方法配置规则

3、在需要配置二级路由的组件中添加router-view

4、设置导航 <router-link to="/ / ">

5、设置导航链接的样式

我们可以定义一个一级路由，里面可以包裹底部footer组件，让他为二级路由，这时点击底部的二级路由时，就会切换不同的页面，而不需要底部组件显示的时候，那我们在配置一个一级路由就好了！！！

以上就是关于VUE脚手架router安装,详解,二级配置,锚链接跳转全部的内容，包括:VUE脚手架router安装,详解,二级配置,锚链接跳转、使用vuejs时，变量在a标签中怎么解析、vue路由（一、二级路由）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！