vue（过滤器显示路由的基本写法 vuecli的搭建顺序动态路由params与query的书写取值等）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
                //挂子后 可书写在根template   也可直接书写html eg:<App/>   
                 <!--在根组件挂了  就可以直接用子-->
</div>

<script>
    let App={
        data() {
            return {
                msg:'hello word'
            }
        },
        template:`
<div>{{ msg | reverse1 }}</div>`,

        filters:{
            reverse1:function (value) {
                console.log(value)
                return  value.split('').reverse().join('')
                // 需要return  filter等数据方法都要从当前文件等拿取
            }
        }
    }
    new Vue({
        el:'#app',
        data(){
            return{ msg: 123
            }
        },
         template:`                        //挂子后 可书写在根template   也可直接书写html eg:<App/>
        <div class="app">
               <h1>{{ msg }}</h1>
                <App/>
        </div>
        `,
        components:{
            App
        },
    })
</script>
</body>
</html>

过滤器演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="vue.min.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
<div id="app">

</div>
<script>
    let App={
        data(){
            return {}

        },
        template:`<div>
            <div class="head"> <router-link to="/home">首页</router-link>
            </div>
           <router-view></router-view>

</div>`
    }
    const Home={
        data(){
            return {

            }
        },
        template: `<div>我是首页</div>`
    }
    const router=new VueRouter({
        routes:[{
            path:'/',
            redirect:'/home'
                },
                  {
                path: '/home',              //注意路由的书写
                component:Home
                 }
            ]
    })
    new Vue({
        el:'#app',
        router,          //挂载内部是router：router
        data() {
            return {}

        },
        template: `<App />`,
        components: {                       //全局组件记得加s
            App
        }
    })

</script>
</body>
</html>

vue-router 路由的基本写法

vue动态路由params与query的书写取值等

params------->取值是在路径后取值（使用 this.$router.params）

eg：localhost:8080/free/detail/3 使用params可以取出3

query--------->是在问号后取值　　　　(使用 this.$router.query)

eg：localhost:8080/free/detail?word=linux 可以使用query取值到linux

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  7     <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  8     <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
  9     <script src="vue.min.js"></script>
 10     <script src="vue-router.js"></script>
 11 </head>
 12 <body>
 13 <div id="app"></div>
 14 <script>
 15     const Home = {
 16         data() {
 17             return {}
 18         },
 19         template: `//必须用标签包裹 否者不显示
 20                      <div><h1>我是首页</h1>
 21                     <button @click="handler">点击跳转用户界面</button>
 22 </div>
 23 `,
 24         methods:{
 25             handler(){
 26                 this.$router.push({                //push是路由内置提供的   （编程式跳转）router使用
 27                     name:'user'　　　　　　　　　　//跳转命名路由 也可直接（'/user'）括号跳转
 28                 })
 29             }
 30         },
 31 
 32         created(){　　　　
　　　　　　　　　　　　　　取值router路由的后的id

 33             this.$route.query.id       //复用后生命周期勾子函数不会再调用了
 34         },
 35         watch:{
 36             $route(to,from){
 37                 console.log(to)
 38                 console.log(to.params.id)   //路由的
 39                 console.log(from)
 40 
 41             }
 42         }
 43     }
 44     const User={
 45         data(){
 46             return{}
 47         },
 48         // created(){
 49         //     console.log(this.$route.query.id) },      //复用后生命周期勾子函数不会再调用了
 50         watch: {
 51           $route(to, from) {
 52               console.log(to)
 53               console.log(to.query.id)                  //query同params取值  
 54               console.log(from)
 55           }
 56         },
 57         template:`<div>我是用户</div>`
 58     }
 59     let App={
 60         data(){return{
 61 
 62         }},
 63         template:`<div>                                                 //同路由才会打印
 64                     <div class="header"><router-link :to="{name:'home',params:{id:1}}">首页</router-link>
 65                     <div class="header"><router-link :to="{name:'home',params:{id:2}}">首页2</router-link>
 66                     <div class="header"><router-link :to="{name:'user',query:{id:1}}">首页2</router-link>
 67                     <div class="header"><router-link :to="{name:'user',query:{id:2}}">首页2</router-link>
 68                     <div class="header"><router-link :to="{name:'user'}">用户</router-link>
 69                     </div>
 70                     <router-view></router-view>
 71                     </div>
 72 `}
 73 
 74 
 75     const router=new VueRouter({
 76         mode:'history',
 77         routes:[                            //记住是routes  不是router  一定要记住
 78             {
 79                 path:'/',
 80                 redirect:'/home'
 81             },
 82             {
 83                 path: '/home/:id',
 84                 name:'home',            //命名路由
 85                 component:Home                 //记住不要加引号        一定要记住
 86             },
 87             {
 88                 path: '/user',
 89                 name:'user',            //命名路由
 90                 component:User                   //记住不要加引号        一定要记住
 91             },
 92 
 93         ]
 94     })
 95 
 96     new Vue({
 97         el:'#app',
 98         router,
 99         data(){
100             return{}
101         },
102         template: `<App />`,
103         components:{                        //局部挂子是有s的全局没有
104             App
105         }
106 
107     })
108 
109 
110 </script>
111 
112 </body>
113 </html>

vuecli的搭建顺序

posted @ 2021-06-16 22:49 欧阳锦涛阅读(43) 评论(0) 收藏举报

刷新页面返回顶部

加油努力

写写写

vue（过滤器显示路由的基本写法 vuecli的搭建顺序动态路由params与query的书写取值等）

公告

加油努力

写写写

vue（过滤器显示 路由的基本写法 vuecli的搭建顺序 动态路由params与query的书写取值等）

公告

vue（过滤器显示路由的基本写法 vuecli的搭建顺序动态路由params与query的书写取值等）