vue-router--＞路由的基本使用

先上笔记

在浏览器中可以用location.hash='foo';
不刷新改变url地址(根据在于network中无新资源请求)
location.herf='foo';
会刷新改变url地址(network中有新资源请求)
herf-->hyper reference(超级连接)
会有一个ico文件(logo)每次都自动刷新(这是谷歌浏览器自动请求的)
hash会通过前端路由来帮助你动态渲染指定内容
(使用hash或者herf后界面会发生改变，下面一部分内容消失)

html5新加的history方法也可以改url但是不刷新
history.pushState( {} , '' , 'url' );  返回undefined
pushState以一种栈的方式进行操作(压子弹,先进后出),使得每次改变都会改变地址
使用history.back()  即可退回到上次界面的url
history.replaceState({},'','asq');  直接替换，使用back不会回到上一层
在点击router-link以后，会自动给他添加上class="router-link-exact-active router-link-active"
可以用于快速添加属性
动态路由(路径)->用于转到不确定地址，如用户界面
在index.js中配置-->
path:'/user/:userid',//用于动态路由,使得显示格式为user/id~~~
 // this.$route.params.变量属性-->通过这种属性来拿到变量属性
//请注意!!这里拿到的依然是index.js中处于活跃状态的路由映射{}中的属性
//也就是path:'/user/:userid'中的:userid

之后是index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

import Home from '../components/home'
import About from '../components/about'
import User from '../components/user'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/home',
      component:Home,
    },
    {
      path:'/about',
      component:About,
    },
    {
      path:'',//这里加不加/都可以
      redirect:'/home',//重定向
      component:Home,
    },
    {
      path:'/user/:userid',//用于动态路由,使得显示格式为user/id~~~
      component:User,
    },
  ],
  mode:'history',//使得url由hash改变改为history模式!强大的！
  linkActiveClass:'active',
})

App.vue

<template>
  <div id="app">
    <h1>123123</h1>
    <router-link to='/home' tag="button" replace active-class="active">首页</router-link>
    <!-- tag标签，可以改变router-link渲染之后显示的格式 -->
    <!-- replace='true'可以使得回退按钮不能被点击 -->
    <!-- active-class="active"可以将router-link-active属性改为你自己想要的属性名字！！ -->
    <!-- 更厉害的是，你可以在路由文件中一次到位修改属性名称！！！ -->
    <router-link to='/about' replace active-class="active">相关</router-link>
    <router-view></router-view>
    <router-link to='/home' tag="button">首页</router-link>
    <button @click="aboutclick">ABOUT</button>
    <router-link :to="'/user/'+ausersid">用户</router-link>
    <!-- 回顾经典，使用v-bind:绑定属性和data里面的值！！ -->
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      ausersid:'Eille',
    };
  },
  methods: {
    aboutclick(){//通过代码方式来修改路径
      //vue已经在所有组件内自动添加了$router属性!!!
      this.$router.push('/about');
      // this.$router.replace('/about');
      //不想写push，也可以用replace来代替!!方便啊
      console.log('aboutclick');
    },
  },
}
</script>

<style>
  .active{
    color: red;
  }
</style>

about.vue和home.vue

<template>
  <div>
      <h1>我是ABOUT</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

<style>
</style>
-----------------------------------
<template>
  <div>
      <h1>我是首页</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style>
</style>

user.vue

<template>
  <div>
      <h1>我是用户->{{getueserid}}</h1>
  </div>
</template>

<script>
export default {
  name: 'User',
  computed:{
    getueserid(){
        //$router指的是index.js中创建的router
        // 而router指的是index.js中处于活跃状态的路由映射{}
        return this.$route.params.userid;
        // this.$route.params.变量属性-->通过这种属性来拿到变量属性
        //请注意!!这里拿到的依然是index.js中处于活跃状态的路由映射{}中的属性
        //也就是path:'/user/:userid'中的:userid
    },
},
}

</script>

<style>
</style>