홈 탐색 도움말
로그인
lovecoding
/
W260426
8
0
포크 0
파일 이슈 0 풀 리퀘스트 0 위키
소스 검색

admin

fengchuanyu 12 시간 전
부모
f6ba550d95
커밋
db2239984e
5개의 변경된 파일과 75개의 추가작업 그리고 4개의 파일을 삭제
분할 보기 변경상태 보기
  1. 10 1
      10_vuecli/vueadmin/src/router/index.js
  2. 19 0
      10_vuecli/vueadmin/src/views/level/LevelAdd.vue
  3. 2 2
      10_vuecli/vueadmin/src/views/message/MessageAdd.vue
  4. 2 1
      10_vuecli/vueadmin/src/views/message/MessageList.vue
  5. 42 0
      9_Vue/11_set.html

+ 10 - 1
10_vuecli/vueadmin/src/router/index.js
파일 보기 

@@ -83,6 +83,15 @@ export const constantRoutes = [
 
     component: Layout,
 
     // 路由名称
 
     name: 'Level',
 
+    // 路由守卫
 
+    beforeEnter(to, from, next){
 
+      // 路由守卫 用于判断是否可以跳转
 
+      // to 路由进入时的路径 当前页面
 
+      // from 路由进入时的路径 从那个页面进来
 
+      // next 路由守卫的回调函数 用于放行 只要执行next()方法 就会放行 如果不执行next()方法 就会阻止路由进入
 
+      console.log(to,from,next);
 
+      // 判断是否可以跳转 如果可以跳转执行next()
 
+    },
 
     // 重定向到等级列表页面
 
     redirect: '/level/levellist',
 
     // meta 侧边栏展示的标题和图标
 
@@ -143,7 +152,7 @@ export const constantRoutes = [
 
         // 后面加上?代表当前参数为可选项
 
         path: 'messageadd',
 
         name: 'MessageAdd',
 
-        alias:'messageedit/:id?',
 
+        alias:'messageedit',
 
         component:()=>import('@/views/message/MessageAdd.vue'),
 
         meta:{title:'添加消息',icon:'el-icon-document-add'}
 
       }

+ 19 - 0
10_vuecli/vueadmin/src/views/level/LevelAdd.vue
파일 보기 

@@ -33,6 +33,25 @@ export default {
 
             }
 
         };
 
     },
 
+    // 路由守卫
 
+    // beforeRouteLeave(to, from, next) {
 
+    //     // 路由离开时 调用获取等级列表的方法
 
+    //     // to 路由离开时的路径 目标页面
 
+    //     // from 路由离开时的路径 当前页面
 
+    //     // next 路由守卫的回调函数 用于放行 只要执行next()方法 就会放行 如果不执行next()方法 就会阻止路由离开
 
+    //     console.log(to,from,next);
 
+    //     // 判断是否可以跳转 如果可以跳转执行next()
 
+    //     next();
 
+    // },
 
+    // beforeRouteEnter(to, from, next){
 
+    //     // 路由进入时 调用获取等级列表的方法
 
+    //     // to 路由进入时的路径 当前页面
 
+    //     // from 路由进入时的路径 从那个页面进来
 
+    //     // next 路由守卫的回调函数 用于放行 只要执行next()方法 就会放行 如果不执行next()方法 就会阻止路由进入
 
+    //     console.log(to,from,next);
 
+    //     // 判断是否可以跳转 如果可以跳转执行next()
 
+    //     // next();
 
+    // },
 
     created() {
 
         // 初始化页面
 
         this.initFun();

+ 2 - 2
10_vuecli/vueadmin/src/views/message/MessageAdd.vue
파일 보기 

@@ -58,12 +58,12 @@ export default {
 
     created(){
 
         this.initData();
 
         this.initPage();
 
+        console.log(this.$route);
 
     },
 
     methods:{
 
         // 初始化页面
 
         initPage(){
 
-            // url 传递参数使用params接收
 
-            let id = this.$route.params.id;
 
+            let id = this.$route.query.id;
 
             console.log(id);
 
             if(id){
 
                 getMessageById(id).then((res)=>{

+ 2 - 1
10_vuecli/vueadmin/src/views/message/MessageList.vue
파일 보기 

@@ -61,6 +61,7 @@ export default {
 
     },
 
     created() {
 
         this.formatData();
 
+
 
     },
 
     methods: {
 
         // 根据地址筛选消息
 
@@ -156,7 +157,7 @@ export default {
 
         // 编辑方法
 
         handleEdit(row) {
 
             console.log(row.jrid);
 
-            this.$router.push("/message/messageedit/"+row.jrid)
 
+            this.$router.push({path:'/message/messageedit',query:{id:row.jrid}})
 
         },
 
         // 重置方法
 
         resetData(){

+ 42 - 0
9_Vue/11_set.html
파일 보기 

@@ -0,0 +1,42 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./js/vue.js"></script>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <h1>{{msg}}</h1>
 
+        <h2>用户姓名{{person.name}}</h2>
 
+        <h2>用户年龄{{person.age}}</h2>
 
+        <h2>用户性别{{person.sex}}</h2>
 
+        <button @click="addAttr">
 
+            添加属性
 
+        </button>
 
+    </div>
 
+    <script>
 
+        new Vue({
 
+            el: '#app',
 
+            data: {
 
+                msg: 'hello vue',
 
+                person:{
 
+                    name:'张三',
 
+                    age:18
 
+                }
 
+            },
 
+            methods:{
 
+                addAttr(){
 
+                    // vue2 中添加属性 没有响应式效果
 
+                    // this.person.age = 20;
 
+                    // this.person.sex='男'
 
+                    // vue2 中添加属性 可以使用set方法添加
 
+                    Vue.set(this.person,'sex','男')
 
+                    // set 中 第一个参数是要修改的对象 第二个参数是要添加属性名 第三个参数是属性值
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>