fi

package.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-router": "^3.5.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/App.vue

@@ -1,28 +1,58 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
+    <!-- <item name="啦啦啦" addr="山东省" tel="12345678901" src="https://tva1.sinaimg.cn/large/007YMVZbgy1gmk0b5uqu4j31e00s41ky" id="2"></item>
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <item id="3"></item>
+    <item src="https://tva1.sinaimg.cn/large/007YMVZbgy1gmk0b5uqu4j31e00s41ky"></item>
+    <item></item>
+    <item></item>
+    <item></item> -->
+    <!-- <p @click="count++" id="count">{{count}}</p>
+    <p id="label">这是要js更改的</p>
+    <button @click="destory">销毁</button> -->
+    <!-- <item v-for="item in num" :key="item" :name="item.name" :id="item" @tap="asd" @aaa="aaa"></item> -->
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+// import item from "./components/item.vue"
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    
+    // item
+  },
+  data(){
+    return {
+      count:0,
+      num:[{
+        name:1
+      },{
+        name:2
+      },{
+        name:3
+      }]
     }
+  },
+  methods:{
+    asd(id){
+      console.log(id)
+    },
+    aaa(id,a,b,c,d,e){
+      console.log(id,a,b,c,d,e)
+    },
+    destory(){
+      this.$destroy()
+    }
+  }
+ 
 }
 </script>
 
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  background-color: #EFF0F5;
-  -webkit-font-smoothing: antialiased;
+  min-height: 100vh; 
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

src/components/aa.vue

@@ -0,0 +1,20 @@
+ 
+ 
+ <template>
+  <button v-on:click="aa">You clicked me {{ count }}{{ aaa }} times.</button>
+</template>
+ <script>
+export default {
+  data: function () {
+    return {
+      count: 1,
+    };
+  },
+  props: ["aaa"],
+  methods: {
+    aa() {
+      alert(this.aaa);
+    },
+  },
+};
+</script>

src/components/item.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="box" @click="tap" @dblclick="shuangji">
+    <div class="no">
+      <span>2</span>
+    </div>
+    <!-- :style="{
+        backgroundImage: 'url(' + src + ')',
+    }" -->
+    <div class="info" >
+      <div class="nackname">姓名：{{name}}</div>
+      <div class="addr"><span>地址：{{id}}</span><span>手机号：{{tel}}</span></div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/**scoped */
+.box {
+  width: 100%;
+  height: 162px;
+  display: flex;
+  padding: 32px;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 10px;
+  margin-bottom: 1px;
+}
+.no {
+  height: 102px;
+  /* margin-left: 48px; */
+  padding-right: 20px;
+  border-right: 1px solid #F1F1F1;
+  display: flex;
+  align-items: center;
+  
+
+}
+.no > span {
+    width: 44px;
+    height: 44px;
+    background-color: #E43019;
+    border-radius: 50px;
+    font-size: 20px;
+    line-height: 44px;
+    text-align: center;
+    color: #fff;
+}
+.info{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-size: 26px;
+    color: #333333;
+    width: 100%;
+    margin-left: 60px;
+
+}
+.nackname{
+    text-align: left;
+}
+.addr{
+    display: flex;
+    justify-content: space-between;
+}
+</style>
+
+<script>
+export default {
+    props:['name','addr','tel','src','id'], // 注册属性
+    methods:{
+        tap(){
+            this.$emit('tap',this.id)
+        },
+        shuangji(){
+            this.$emit("aaa",{
+                name:"",
+                id:""
+            })
+        }
+    }
+};
+</script>

src/main.js

@@ -1,8 +1,19 @@
-import Vue from 'vue'
+import Vue from 'vue' // 引入 vue  nodem_moudules 不需要写路径
-import App from './App.vue'
+import App from './App.vue' // 自己的文件需要写路径
-
+import router from "./router/index.js"
-Vue.config.productionTip = false
+Vue.config.productionTip = false  // 阻止生产提示
-
 new Vue({
-  render: h => h(App),
+  render: h => h(App), // 渲染 传入的组件 根组件
+  router: router //挂载router
 }).$mount('#app')
+// 链式操作 vue3 $
+
+// 引入完成
+// vue引入 Vue.use
+
+// 1.将组件映射到路由
+// 2.告诉vuerouter渲染到哪里 刚开始router 必须写在跟组件里面 (App.vue)
+// 3. 创建 router 实例 // new 引入进来的router明总
+// 4. 创建和挂载根实例。 // 在new vue里面写 router: router
+
+// url带/#/ hash 导航

src/pages/admin.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    这是admin的页面
+    <div>
+      <router-link :to='{path:"/",query:{id:"10",name:"萨达"}}'>到首页</router-link>
+      <!-- <a href="/">a标签到首页</a> a标签的会重新请求页面html 对于单页应用失去了优势 -->
+
+    </div>
+    <div>
+        <button @click="navto()">点我跳转</button>
+    </div>
+     <div>
+        <button @click="replace()">replace</button>
+    </div>
+    <div>
+        <button @click="go()">go</button>
+    </div>
+    <div><button @click="xiugai">修改参数</button></div>
+  </div>
+</template>
+
+<style scoped>
+</style>
+
+<script>
+export default {
+    // 组件前置守卫不能用this
+    beforeRouteEnter(to, from, next){
+        console.log("组件")  
+        next()
+    },
+    // 路径不变 query参数或者params 参数改变的时候
+    beforeRouteUpdate(to, from, next){
+        console.log("组件复用beforeRouteUpdate",this.count)  
+        next()
+    },
+      beforeRouteLeave(to, from, next) {
+       console.log("离开beforeRouteLeave",this.count)  
+        next()
+    },
+    data(){
+        return {
+            count:100
+        }
+    },
+    mounted(){
+        console.log("生命周期")
+    },
+    methods:{
+        xiugai(){
+            this.$router.push({path:"/admin",query:{data: new Date().getTime()}})
+        },
+        navto(){
+            // 编程式导航怎么写
+            // 要带参数 就用对象 写query  自动拼接url后
+            // this.$router.push({path:"/",query:{id:"10",name:"萨达"}})
+            // params
+            console.log(1)
+            // this.$router.push({path: '/params/123' })
+            this.$router.push({name:"params",params:{id:123,name:111,aaa:111}})
+            // this.$router.push("/")
+        },
+        replace(){
+            // 不能回退 会替换当前路由 (当前路由被删除 用跳转之后的代替)
+            this.$router.replace({path:"/",query:{id:"10",name:"萨达"}})
+        },
+        go(){
+            // 正数 前进 个数小于写的数 不做任何动作 后退也一样
+            // this.$router.go(4)
+            this.$router.go(-15);
+        }
+    }
+};
+</script>

src/pages/params.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        这是params传参
+    </div>
+</template>
+
+<style scoped>
+
+</style>
+
+<script>
+export default {
+    // 生命周期
+    mounted(){
+        console.log(this.$route.params.id)
+        console.log(this.$route.params.name)
+    },
+    methods:{
+
+    } 
+}
+</script>

src/router/index.js

@@ -0,0 +1,66 @@
+import Vue from 'vue' // 引入 vue  nodem_moudules 不需要写路径
+import VueRouter from 'vue-router' // 引入vuroute
+import index from "../views/index.vue"
+import user from "../views/user.vue"
+import admin from "../pages/admin.vue"
+Vue.use(VueRouter)
+const routes = [
+    { path: '/', component: index },
+    { path: '/a/b/c/d', name: "user", component: user },
+    {
+        path: "/admin", beforeEnter: (to, from, next) => {
+            // ...
+            console.log("路由独享")
+            next()
+        }, component: admin
+    },
+    { path: "/params", name: "params", component: () => import("../pages/params.vue") }
+]
+// path
+// name 名字
+const router = new VueRouter({
+    mode: "history",
+    routes // (缩写) 相当于 routes: routes
+})
+
+// 1.全局前置守卫
+// 2.路由独享守卫
+// 3.组件内解析守卫
+// 4. 解析守卫
+// 5. 全局后置守卫
+
+
+// 前置守卫
+router.beforeEach((to, from, next) => {
+    // console.log(to,from)
+    if (to.path == "/") {
+        // alert("你即将到首页")
+        console.log("你即将到首页")
+    }
+    if (to.path == "/a/b/c/d") {
+        console.log("到user")
+        next({ path: '/admin', query: { name: 123 } })
+    } else {
+        next()
+    }
+    // ...
+    // next() // 继续跳转
+    // next(false) 停止跳转 这次跳转不生效
+    // next('url') or next({path,query,params,name}) 重定向到其他也页面
+})
+router.beforeResolve((to, from, next) => {
+    console.log("解析收尾")
+        next()
+
+    // ...
+    // next() // 继续跳转
+    // next(false) 停止跳转 这次跳转不生效
+    // next('url') or next({path,query,params,name}) 重定向到其他也页面
+})
+//   后置 跳转完成之后
+router.afterEach((to, from) => {
+    console.log(to, from, "后置")
+
+    // ...
+})
+export default router

src/views/index.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+        这是首页的组件
+        <div>
+            <router-link :to='{name:"user"}'>点我跳转user</router-link>
+        </div>
+        <admin></admin>
+    </div>    
+</template>
+
+<style scoped>
+
+</style>
+
+<script>
+import admin from "../pages/admin.vue"
+export default {
+    components:{
+        admin
+    },
+    mounted(){
+        console.log(this.$route.query.id)
+    }
+}
+</script>

src/views/user.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        这是用户的页面组件
+        <div>
+            <router-link to="/admin">到admin</router-link>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
+
+<script>
+export default {
+    
+}
+</script>

yarn.lock

@@ -8179,6 +8179,11 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-router@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.5.1.tgz#edf3cf4907952d1e0583e079237220c5ff6eb6c9"
+  integrity sha1-7fPPSQeVLR4Fg+B5I3Igxf9utsk=
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.3"
   resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"