vue学习记录 coderwhy d8

Posted 2022-12-13 Kooklen_xh

Vue.use(Router)

export default new Router(
  routes: [
    
      path:'',
      redirect: '/Home'
    ,
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    ,
    
      path: '/Home',
      component: Home
    ,
    
      path:'/About',
      component: About
    
  ]
)

使用history

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from "../components/Home";
import About from "../components/About";

Vue.use(Router)

export default new Router(
  routes: [
    
      path:'',
      redirect: '/Home'
    ,
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    ,
    
      path: '/Home',
      component: Home
    ,
    
      path:'/About',
      component: About
    
  ],
  mode:'history'
)

<router-link to="/Home" tag="button">首页</router-link>
    <router-link to="/About" tag="button">about</router-link>

export default 
  name: 'App',
  methods:
    btnHome()
      this.$router.push('./Home')
    ,
    btnAbout()
      this.$router.push('./About')
      //or
      this.$router.replace('./About')
    
  

    <router-link v-bind:to="/User/+userid" tag="button"active-class="active" replace>user</router-link>
    
    data()
    return
      userid:'fzy'
    
  ,

<template>
  <div>
    <span>userId</span>
    <span> $route.params.userId </span>
  </div>
</template>

<script>
export default 
  name: "User",
  computed:
    userId()
      return this.$route.params.userId
    
  

</script>

const Home=()=>import('../components/Home');
const About=()=>import('../components/About');
const User=()=>import('../components/User');

<template>
  <div>
    <h1>最新讯息</h1>

    <ul>
      <li>讯息1</li>
      <li>讯息2</li>
      <li>讯息3</li>
      <li>讯息4</li>
    </ul></div>
</template>

<script>
export default 
  name: "HomeMessage"

</script>

<style scoped>

</style>

<template>
  <div>
    <h1>最新新闻</h1>

  <ul>
    <li>新闻1</li>
    <li>新闻2</li>
    <li>新闻3</li>
    <li>新闻4</li>
  </ul></div>
</template>

<script>
export default 
  name: "HomeNews"

</script>

<style scoped>

</style>

<template>
  <div>
<div>我是首页</div>
  <div>我是首页内容</div>
  <router-link to="/home/news" tag="button">News</router-link>
    <router-link to="/home/message" tag="button">Message</router-link>
  <router-view></router-view>
  </div>
</template>
<script>
export default 
  name: "Home"

</script>

<style scoped>

</style>

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";
const Home=()=>import('../components/Home');
const About=()=>import('../components/About');
const User=()=>import('../components/User');
const HomeNews=()=>import('../components/HomeNews');
const HomeMessage=()=>import('../components/HomeMessage');

// const HelloWorld=()=>import('../components/HelloWorld');

Vue.use(Router)

export default new Router(
  routes: [
    
      path:'',
      redirect: '/Home'
    ,
    
      path: '/Home',
      component: Home,
      children:[
        path:'news',
        component:HomeNews
      ,
        path:'message',
        component:HomeMessage
    ]
    ,
    
      path:'/About',
      component: About
    ,
    
      path: '/User/:userId',
      component: User
    
  ],
  mode:'history'
)

URI = scheme:[//authority]path[?query][#fragment]

<template>
<div>
  <h2>我是Profile</h2>
  <h1>name:$route.query.name</h1>
  <h1>age:$route.query.age</h1>

</div>
</template>

<script>
export default 
  name: "Profile"

</script>

<style scoped>

</style>

    <router-link :to="path:'/profile',query:name:'why',age:18" tag="button" active-class="active" >Profile</router-link>

<template>
  <div id="app">
    Everything is OK <br>
<!--    <button @click="btnHome">Home</button>-->
<!--    <button @click="btnAbout">About</button>-->
    <button @click="btnUser">用户</button>
    <button @click="btnProfile">档案</button>

    <router-link :to="path:'/profile',query:name:'why',age:18" tag="button" active-class="active" >Profile</router-link>
    <router-link to="/Home" tag="button" active-class="active" replace>index</router-link>
    <router-link to="/About" tag="button" active-class="active" >about</router-link>
    <router-link :to="/User/+userid" tag="button"active-class="active" >user</router-link>

    <router-view></router-view>
    <div></div>
  </div>
</template>

<script>
export default 
  name: 'App',
  data()
    return
      userid:'fzy'
    
  ,
  methods:
    btnUser()
      this.$router.push('/user/' + this.userid)
    ,
    btnProfile()
      this.$router.push(
        path:'profile',
        query:
          name:'why',
          age:18,
          height:1.88
        
      )

    

</script>

<style>
button
  height: 25px;

</style>